Генератор 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.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор ИМТ
Узнайте свой Индекс массы тела (ИМТ) онлайн. Простой и точный расчет для мужчин и женщин.
Калькулятор сна и циклов (время отбоя)
Рассчитайте идеальное время сна и пробуждения по циклам (90 минут). Перевод часов сна в годы жизни.
Калькулятор вязания (петли и пряжа)
Плотность вязки, количество петель и расход пряжи по образцу. Для вязания спицами и крючком.
Калькулятор гипсокартона (ГКЛ)
Листы ГКЛ, профили, саморезы и шпаклёвка. Для стен, перегородок и потолков с учётом отходов.
Калькулятор теста для пиццы
Мука, вода, дрожжи и соль для неаполитанской, нью-йоркской и римской пиццы. По количеству и размеру.
Калькулятор птицеводства
Расчёт кормления, яичного и мясного производства в птицеводстве. Нормы по ВНИТИП для кур, бройлеров, индеек, уток. Рентабельность птицефермы.
Калькулятор штрихкода (EAN/UPC) и упаковки
Проверка контрольной цифры штрихкодов (EAN-13, EAN-8, UPC) и расчет параметров упаковки (объем, вес).
Калькулятор акустики помещения (RT60)
Время реверберации RT60 по формуле Сабина. Подбор акустической обработки для студии и кинотеатра.
Калькулятор технического обслуживания (ТОиР)
Расчёты ТОиР: MTBF/MTTR, планирование ТО, стоимость простоя, запчасти, предиктивное ТО
Калькулятор пружины (закон Гука)
Сила пружины, потенциальная энергия, период колебаний. Последовательное и параллельное соединение пружин.
Калькулятор радиоастрономии
Преобразование координат (Az/Alt ↔ RA/Dec) и расчёт эффекта Доплера для спектральных линий HI и OH.
Калькулятор описательной статистики
Рассчитать среднее, медиану, моду, дисперсию и другие показатели онлайн. Полный статистический анализ ряда чисел.
Калькулятор площади и объёма фигур
Расчет площади, периметра, объёма и поверхности для 2D и 3D фигур. Формулы Герона, эллипсы, торы, инженерные задачи.
Калькулятор цепочки поставок
Расчёты цепочки поставок: EOQ, точка заказа, ABC-анализ, Bullwhip-эффект, транспорт, KPI
Калькулятор гликемической нагрузки
Рассчитайте гликемическую нагрузку (GL) продуктов. Важно для диабетиков и контроля веса. Отличие от ГИ.