CSS box-shadow: тени для элементов

Введение

Тень — простой и в то же время мощный визуальный инструмент. Правильно настроенная тень придаёт интерфейсу глубину, выделяет интерактивные элементы, помогает разделить слои контента. Плохо настроенная — выглядит «грязно» и выдаёт новичка. В CSS тени создаются свойствомbox-shadow, и у него множество параметров: смещение, размытие, растяжение, цвет, внутренняя или внешняя. В этой статье разберём синтаксис, типичные паттерны и подходы к созданию реалистичных теней. Для быстрой генерации готового CSS используйте наш генератор box-shadow.

Синтаксис box-shadow

Свойство box-shadow принимает список значений. Минимальный набор — два значения смещения и цвет, но чаще используются все параметры:

box-shadow: offsetX offsetY blurRadius spreadRadius color;

Параметр	Описание	Тип
offsetX	Смещение по горизонтали	Длина (положительное — вправо)
offsetY	Смещение по вертикали	Длина (положительное — вниз)
blurRadius	Радиус размытия	Длина (0 — резкая граница)
spreadRadius	Растяжение тени	Длина (положительное — расширяет)
color	Цвет тени	HEX, RGB, HSL

Простейшая тень выглядит так:

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

Здесь тень смещена на 4 пикселя вниз, размыта на 8 пикселей, цвет — чёрный с прозрачностью 0.15. Это базовая «нижняя тень», которую используют в карточках и кнопках.

Внутренние тени: inset

Ключевое слово inset переносит тень внутрь элемента. Это полезно для инпутов в состоянии focus, объёмных кнопок и «выдавленных» элементов:

.input:focus {
  box-shadow: inset 0 0 0 2px #4facfe;
}

.button-pressed {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

inset можно ставить в начале или в конце списка параметров — результат одинаковый.

Множественные тени

CSS допускает несколько теней через запятую. Они накладываются снизу вверх: первая в списке — верхняя. Это позволяет создавать сложные композиции: цветные ореолы, многослойные «материальные» тени, тонкие обводки.

/* Многослойная тень в стиле Material Design */
.floating-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Цветной ореол + чёрная тень */
.accent-button {
  box-shadow:
    0 0 0 4px rgba(79, 172, 254, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

Тонкая обводка через box-shadow

Конструкция 0 0 0 Npx color создаёт сплошную обводку вокруг элемента, не влияя на его размеры (в отличие отborder). Это удобно для focus-кольца:

.button:focus-visible {
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.5);
}

Реалистичные тени: принципы

В реальном мире тень никогда не бывает одного цвета и одного слоя. Чем дальше объект от поверхности, тем мягче и шире тень; чем ближе — тем резче и темнее. В CSS это имитируется многослойными тенями с разными радиусами и прозрачностями.

/* Реалистичная «парящая» тень */
.lifted-card {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 2px rgba(0, 0, 0, 0.06),
    0 4px 4px rgba(0, 0, 0, 0.05),
    0 8px 8px rgba(0, 0, 0, 0.04),
    0 16px 16px rgba(0, 0, 0, 0.03);
}

Такой приём используют Apple, Stripe, Linear — он создаёт ощущение объёма без «грязного» размытия. Главное правило: каждый следующий слой шире, но прозрачнее предыдущего.

Типовые паттерны теней

Кнопка

.btn {
  background: #4facfe;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.btn:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

Выпадающее меню

.dropdown {
  background: #ffffff;
  border-radius: 8px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

Отрицательное растяжение (-1px) делает тень компактнее — она не «вылезает» за пределы визуальной зоны.

Модальное окно

.modal {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 24px 48px -12px rgba(0, 0, 0, 0.25);
}

«Стеклянный» эффект

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

Цвет тени: правила хорошего тона

Чёрный цвет с прозрачностью — рабочий, но не единственный вариант. Часто тень того же оттенка, что и фон, выглядит мягче и естественнее. Например, для синей кнопки лучше подходит тёмно-синяя тень, а не чёрная. Сравните:

/* Чёрная тень — резче */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

/* Тёмно-синяя тень — мягче, в тон */
box-shadow: 0 4px 12px rgba(20, 60, 120, 0.25);

В HSL удобно получать такие тени: тот же Hue, низкая насыщенность, низкая светлота. Подробнее — в статье проHSL модель.

Анимация теней

Анимировать box-shadow через transitionможно, но это ресурсозатратно: браузер пересчитывает тень каждый кадр. На сложных композициях с 4–5 слоями анимация может тормозить. В таких случаях используют приём с двумя псевдоэлементами: один с обычной тенью, второй — с увеличенной, и переключают прозрачность.

.card {
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover::after {
  opacity: 1;
}

Альтернатива — фильтр drop-shadow(), который работает с SVG-формой элемента и анимируется легче. Но он не поддерживаетspread и inset.

Тёмная тема и тени

В тёмной теме классические тени плохо видны: чёрная тень на тёмном фоне просто исчезает. Используйте светлые тени с большой прозрачностью или вообще откажитесь от теней в пользу тонких границ и градиентов:

/* Тёмная тема: лёгкая светлая тень */
.dark-theme .card {
  background: #1f2937;
  border: 1px solid #374151;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

Производительность

box-shadow сама по себе недорога, но есть несколько правил:

Не анимируйте box-shadow на каждом кадре без необходимости — это вызывает repaint.
Используйте will-change: box-shadow только на элементах, где анимация действительно нужна.
Избегайте огромных радиусов размытия (200+ пикселей) на мобильных — это медленно.
Многослойные тени (больше 5 слоёв) тоже могут тормозить.

Совместимость и фолбэки

Свойство box-shadow поддерживается во всех браузерах последних 10 лет. Единственное исключение — Internet Explorer 8 и старше, где нужен префикс -ms- или фолбэк черезborder. В современных проектах об этом можно не беспокоиться.

Типичные ошибки

Слишком тёмная тень. rgba(0,0,0,0.8) на карточке выглядит грубо. Обычно достаточно 0.1–0.25.
Один слой для большой тени. Резкая граница на широкой тени выглядит неестественно. Делайте несколько слоёв.
Слишком большое смещение. 20px 20pxпревращает тень в отдельный блок. Обычно 2–8 пикселей достаточно.
Игнорирование focus-visible. Снимайте стандартную обводку (outline: none) только если добавляете альтернативную через box-shadow — иначе нарушаете доступность. Подробнее — в материале проWCAG.

Инструменты для работы с тенями

Генератор box-shadow — визуальный конструктор с живым превью и экспортом CSS.
Генератор палитры — подбор цвета тени в тон основному цвету.
Пипетка цвета — выбор цвета тени из любого источника.

Заключение

box-shadow — это не просто «тень для кнопки», а гибкий инструмент построения визуальной иерархии. Освоив множественные тени,inset, цветовые слои и принципы реалистичного размытия, вы сможете создавать интерфейсы, которые выглядят дорого и профессионально. Начните с готовых паттернов из этой статьи, а для тонкой настройки используйте нашгенератор box-shadow. И помните про доступность: focus-кольцо должно быть видно — это требование WCAG, о котором подробно рассказано в статье проконтраст цветов.