Генератор CSS box-shadow
Визуальный инструмент для создания теней в CSS. Настраивайте смещение, размытие, расширение, цвет и прозрачность. Поддержка множественных слоёв, inset-теней и готовых пресетов. Копируйте CSS в один клик.
Что такое box-shadow в CSS?
Свойство box-shadow добавляет одну или несколько теней к элементу HTML. Тени создают эффект глубины и объёма, помогая визуально отделить элементы интерфейса друг от друга. Это один из самых мощных инструментов для создания современного цветового дизайна без использования изображений.
Синтаксис свойства: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Каждый параметр влияет на определённый аспект тени — от направления до размытия и размера.
Offset X и Offset Y
Горизонтальное и вертикальное смещение тени относительно элемента. Положительные значения сдвигают тень вправо и вниз, отрицательные — влево и вверх.
Blur Radius
Радиус размытия тени. Чем больше значение, тем мягче и шире тень. При значении 0 тень получается чёткой и резкой — как у вырезанного элемента.
Spread Radius
Расширение или сжатие тени. Положительные значения увеличивают тень со всех сторон, отрицательные — уменьшают. Полезен для создания тонких подложек и бордюров.
Inset
Ключевое слово inset делает тень внутренней — она рисуется внутри элемента, а не снаружи. Используется для создания вдавленных кнопок и input-полей.
Где применяется box-shadow
Тени — универсальный инструмент дизайна, который используется в самых разных сценариях современной веб-разработки.
Карточки и контейнеры
Тени создают визуальную иерархию, отделяя карточки товаров, постов и информационных блоков от фона. Material Design использует разные уровни elevation для разных типов контента.
Кнопки и элементы управления
Тени делают кнопки «кликабельными» — выпуклыми и интерактивными. При нажатии тень уменьшается или переходит в inset, создавая ощущение вдавливания.
Модальные окна и попапы
Глубокие тени вокруг модальных окон визуально «поднимают» их над основным контентом, фокусируя внимание пользователя на диалоге.
Навигация и хедеры
Фиксированная шапка сайта с тенью внизу создаёт чёткую границу между навигацией и контентом без видимой линии border.
Neumorphism / Soft UI
Стиль neumorphism использует две тени — светлую и тёмную — для создания эффекта мягко выдавленных элементов из фона. Наш генератор поддерживает этот стиль.
Свечение (Glow)
Цветные тени с нулевым offset создают эффект свечения вокруг элемента. Отлично работают для CTA-кнопок, иконок и фокусных состояний в тёмных темах.
Синтаксис и паттерны
Разберём основные конструкции box-shadow — от простейшей тени до сложных многослойных эффектов, которые используются в профессиональных дизайн-системах.
Базовая тень
Минимальная тень — два обязательных значения (offset-x, offset-y) и опциональные blur, spread, color.
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);Множественные тени
Перечислите несколько теней через запятую. Первая тень рисуется поверх остальных. Это ключ к реалистичным эффектам.
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07);Inset (внутренняя тень)
Ключевое слово inset рисует тень внутри элемента. Используется для input-полей, вдавленных кнопок и стиля Neumorphism.
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);Neumorphism (Soft UI)
Две тени — тёмная и светлая — на фоне среднего тона создают эффект мягкой выпуклости.
box-shadow:
6px 6px 12px #b8c0cc,
-6px -6px 12px #ffffff;Elevation в Material Design
Google Material Design определяет пять уровней возвышения (elevation) для создания визуальной иерархии. Каждый уровень использует несколько слоёв теней для достижения реалистичного эффекта глубины. Наш генератор включает готовые пресеты для каждого уровня.
Карточки, кнопки в покое
Hover-состояние кнопок
Навигация, FAB
Меню, дропдауны
Модальные окна, диалоги
Советы по работе с тенями
Профессиональные рекомендации, которые помогут создавать красивые и производительные тени в ваших проектах.
1Используйте несколько слоёв
Одна тень часто выглядит грубо. Несколько тонких слоёв с разными blur и offset создают натуральный вид, имитируя поведение света в реальном мире. Начните с 2-4 слоёв с нарастающим blur.
2Не используйте чёрный цвет
Чистый чёрный (#000000) для теней выглядит неестественно. Используйте тёмно-серые оттенки (rgba(0,0,0,0.1-0.25)) или цветные тени, подобранные под общую палитру интерфейса. Цветные тени выглядят более органично.
3Помните о производительности
Box-shadow не запускает reflow (в отличие от border), но большой blur требует GPU-ресурсов. Для анимаций hover предпочтительнее менять opacity pseudo-элемента с тенью, чем анимировать саму тень.
4Учитывайте тёмную тему
На тёмном фоне стандартные тени не видны. Для тёмных тем используйте более интенсивные тени (opacity 0.4-0.8), цветные glow-эффекты или светлые тени с малой opacity для создания мягкого свечения.
Как пользоваться генератором
Пошаговая инструкция для создания идеальной тени за несколько секунд.
Настройте слайдеры
Двигайте ползунки Offset X, Offset Y, Blur и Spread, чтобы задать форму тени. Результат отображается в реальном времени на превью-блоке.
Выберите цвет и прозрачность
Кликните на палитру цвета или используйте быстрые цвета. Настройте alpha-канал для нужной интенсивности тени.
Добавьте слои
Нажмите «Добавить» для новых слоёв тени. Комбинируйте внешние и inset-тени для сложных эффектов. Переключайтесь между слоями вкладками.
Скопируйте CSS
Нажмите «Копировать» для получения box-shadow кода или «Полный CSS» для получения полного набора свойств с border-radius и background.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор расхода газа на отопление
Расчёт расхода газа на отопление дома за месяц и за сезон. Учёт площади, региона, утепления, КПД котла. Стоимость отопления в рублях.
Агрохимический NPK-калькулятор
Расчёт доз удобрений (NPK) по культуре, площади и типу почвы. Аммиачная селитра, мочевина, суперфосфат, нитроаммофоска.
Калькулятор керамики
Расчёты керамики: шихта, обжиг, усадка, прочность, глазурь, плотность и пористость
Сортировщик строк
Алфавитная, числовая, по длине и случайная сортировка списка строк. Удаление пустых строк и дубликатов.
Калькулятор анионного промежутка (AG)
Рассчитайте анионный промежуток по формуле Na-(Cl+HCO3). Коррекция по альбумину, дельта-дельта соотношение. Диагностика ацидоза.
Калькулятор электронной конфигурации
Конфигурация атомов всех 118 элементов. Полная и сокращённая запись, орбитальные диаграммы, валентные электроны.
Chmod калькулятор (права доступа Unix)
Онлайн калькулятор chmod. Конвертация прав доступа (rwx) в числовой код (777, 755). Генератор команд для Linux.
Калькулятор рыбалки: снасти, прикормка, нормы вылова
Калькулятор для рыбаков. Подбор снастей, расчёт прикормки, нормы вылова по регионам, снаряжение и бюджет поездки.
Калькулятор векторов 2D и 3D
Сложение, вычитание, скалярное и векторное произведение, длина, угол между векторами. Пошаговое решение.
Калькулятор водяного счётчика
Расчёт платы за воду по показаниям счётчика. ХВС, ГВС и водоотведение. Тарифы Москвы и регионов России.
ETL Калькулятор: тайминг, ресурсы, Incremental vs Full, SLA, ошибки
Комплексный калькулятор ETL (Extract-Transform-Load). Оценка времени извлечения, трансформации и загрузки, подбор CPU/RAM/диска, сравнение Incremental и Full Load, расчёт SLA, анализ ошибок и Dead Letter Queue.
Unix Timestamp Converter (перевод времени)
Конвертер Unix Timestamp в дату и обратно. Текущее время Unix, live-режим, форматы ISO 8601, UTC.
Калькулятор стоимости стартапа (Valuation & Burn Rate)
Рассчитайте Pre-money и Post-money оценку, Burn Rate и Runway. Инструмент для планирования раундов инвестиций.
Калькулятор иммунологии
Титр антител, анализ ELISA, субпопуляции лимфоцитов CD4/CD8, эффективность вакцин, комплемент CH50, цитокины.
Калькулятор патофизиологии
Анализ КЩС, анионный промежуток, осмолярность, доставка кислорода DO2, A-a градиент, дефицит воды, силы Старлинга.