Свойство 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)для выноса на отдельный слой
Практические рекомендации
- Консистентность — определите 2–3 уровня теней (sm, md, lg) и используйте их по всему интерфейсу
- Доступность — тени не заменяют контраст; не полагайтесь на них для передачи важной информации
- Тёмная тема — уменьшайте интенсивность теней или используйте светлые тени на тёмном фоне
- Мобильные устройства — на маленьких экранах сильные тени могут выглядеть избыточно
Экспериментируйте с параметрами в конструкторе 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 создаёт ощущение «подъёма» элемента. Соблюдайте умеренность — слишком сильный контраст отвлекает.