CSS box-shadow: все свойства, примеры и трюки

Свойство box-shadow — один из основных инструментов для создания глубины, объёма и визуальной иерархии в интерфейсах. В отличие от устаревших подходов с изображениями или множественными элементами, CSS-тени рендерятся нативно и масштабируются без потери качества. В этой статье разберём синтаксис, типичные паттерны и неочевидные приёмы.

Для быстрой визуальной настройки теней используйте конструктор box-shadow на reChecker — интерактивный инструмент с предпросмотром в реальном времени.

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

Полная форма свойства:

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Параметр	Описание	По умолчанию
offset-x	Смещение по горизонтали (положительное — вправо)	0
offset-y	Смещение по вертикали (положительное — вниз)	0
blur-radius	Радиус размытия (0 — резкая граница)	0
spread-radius	Распространение тени (расширение/сжатие)	0
color	Цвет тени	зависит от браузера (обычно чёрный)
inset	Ключевое слово — тень внутрь элемента	отсутствует

Все параметры, кроме color, могут быть отрицательными. blur-radius и spread-radius не принимают отрицательные значения.

Базовые примеры

Простая тень

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

Классическая «карточная» тень: смещение вниз на 4px, размытие 6px, полупрозрачный чёрный.

Тень с распространением

.button {
  box-shadow: 0 0 0 2px #3b82f6;
}

При blur-radius: 0 и spread-radius: 2px получается имитация обводки. Полезно для focus-состояний.

Inset-тень

.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

Тень рисуется внутри элемента — создаёт эффект «вдавленности», подходит для полей ввода.

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

Свойство принимает несколько теней через запятую. Порядок важен: первая тень отображается поверх последующих.

.elevated {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

Комбинация: мягкая ближняя тень, более размытая дальняя и тонкая обводка для чёткости краёв.

Цветные тени

Тени не обязаны быть серыми. Цветные тени усиливают брендинг и создают выразительные hover-эффекты:

.primary-button {
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.primary-button:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

Трюки и паттерны

Неоморфизм (neumorphism)

Сочетание внешней светлой и внутренней тёмной тени создаёт эффект «выдавленности»:

.neo {
  background: #e0e5ec;
  box-shadow:
    6px 6px 12px #bebebe,
    -6px -6px 12px #ffffff;
}

Работает только на фоне, близком по тону к элементу. Учитывайте доступность: контраст может быть недостаточным.

Стеклянный эффект (glassmorphism)

Тень + полупрозрачный фон + backdrop-filter:

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Анимированные тени

Тени можно анимировать через transition:

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}

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

Анимация box-shadow влияет на производительность (триггерит repaint). Для сложных сцен предпочтительнее filter: drop-shadow() на псевдоэлементах или transform.

Скрытие тени при скролле

Чтобы тень не «обрезалась» родителем с overflow: hidden, добавьте padding или используйте margin на дочернем элементе.

box-shadow vs filter: drop-shadow

Свойство	Применение	Особенности
box-shadow	Прямоугольная форма элемента	Не повторяет форму прозрачных областей
filter: drop-shadow	Любая форма (включая SVG, текст)	Следует альфа-каналу, одна тень

/* box-shadow — тень прямоугольника */
.box { box-shadow: 0 4px 8px black; }

/* drop-shadow — тень по контуру */
.icon { filter: drop-shadow(0 4px 8px black); }

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

Частые изменения box-shadow (например, при скролле) могут вызывать лаги. Рекомендации:

• Используйте will-change: box-shadow только при необходимости и снимайте после анимации
• Предпочитайте статичные тени анимированным там, где возможно
• Для сложных эффектов рассмотрите псевдоэлементы с transform: translateZ(0) для выноса на отдельный слой

Практические рекомендации

1. Консистентность — определите 2–3 уровня теней (sm, md, lg) и используйте их по всему интерфейсу
2. Доступность — тени не заменяют контраст; не полагайтесь на них для передачи важной информации
3. Тёмная тема — уменьшайте интенсивность теней или используйте светлые тени на тёмном фоне
4. Мобильные устройства — на маленьких экранах сильные тени могут выглядеть избыточно

Экспериментируйте с параметрами в конструкторе box-shadow reChecker — визуальная обратная связь ускоряет подбор оптимальных значений.

Готовые наборы теней

Для быстрого старта можно использовать предустановленные значения, соответствующие Material Design или Tailwind:

/* Tailwind-подобные тени */
.shadow-sm  { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow     { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-md  { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }

Адаптируйте значения под свою палитру и плотность теней. Конструктор box-shadow на reChecker позволяет экспортировать готовый CSS после визуальной настройки.

Совместимость с браузерами

box-shadow поддерживается во всех современных браузерах. Для IE9 и ниже потребуется fallback: либо отказ от теней, либо использование filter: progid:DXImageTransform.Microsoft.Shadow (ограниченная функциональность). В 2026 году поддержка IE не актуальна для большинства проектов.

Псевдоэлементы и тени

Тени на псевдоэлементах позволяют создавать сложные эффекты без дополнительной разметки:

.card::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: inherit;
  border-radius: inherit;
  z-index: -1;
  filter: blur(20px);
  opacity: 0.5;
}

Альтернатива — box-shadow на псевдоэлементе с position: absolute и отрицательным z-index. Родитель должен иметь position: relative и overflow: visible (или достаточный padding).

Тени для кнопок и карточек

Рекомендуемые значения для интерактивных элементов:

Элемент	Обычное состояние	Hover/Focus
Кнопка	0 1px 2px rgba(0,0,0,0.05)	0 4px 6px rgba(0,0,0,0.1)
Карточка	0 2px 8px rgba(0,0,0,0.08)	0 8px 24px rgba(0,0,0,0.12)
Модальное окно	0 25px 50px rgba(0,0,0,0.25)	—

Увеличение тени при hover создаёт ощущение «подъёма» элемента. Соблюдайте умеренность — слишком сильный контраст отвлекает.