box-shadow в CSS: как добавить тень к элементу

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

Что такое box-shadow в CSS и зачем он нужен

Box-shadow — это CSS-свойство для создания тени вокруг рамки элемента, которое помогает показать глубину, акцент и состояние интерфейса.

Синтаксис свойства строится вокруг нескольких параметров: смещение по горизонтали, смещение по вертикали, радиус размытия, радиус распространения, цвет и, при необходимости, ключевое слово inset для внутренней тени. Визуально это похоже на предмет, лежащий на поверхности: чем выше «предмет», тем мягче и шире тень; чем ближе к поверхности, тем тень компактнее и контрастнее.

Тень особенно полезна в следующих сценариях:

1. Выделение интерактивных элементов: кнопок, ссылок, карточек товаров.
2. Построение визуальной иерархии: модальные окна должны выглядеть «выше» обычного контента.
3. Передача состояния: hover, focus, active, disabled.
4. Повышение читаемости на светлом фоне, когда одной рамки недостаточно.
5. Имитация объёма без изображений и SVG.

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

Синтаксис box-shadow: из каких остановок состоит маршрут тени

Синтаксис box-shadow — это последовательность параметров, где каждый отвечает за конкретный этап построения тени.

Поскольку вы просили описывать материал максимально конкретно, разберём маршрут свойства буквально как цепочку остановок: где он начинается, через что проходит и где заканчивается.

Маршрут параметров: начало, остановки и конечная точка

Начинается маршрут с обязательного горизонтального смещения, а заканчивается цветом или ключевым словом inset, если оно указано в конце или в начале записи.

Базовый маршрут выглядит так:

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

Здесь маршрут начинается в точке 0 по оси X, затем идёт на 8px вниз по оси Y, получает размытие 24px, не расширяется по spread-radius и заканчивается полупрозрачным чёрным цветом.

Какие значения считаются корректными

Корректными считаются длины в px, em, rem и других единицах CSS, а цвет можно задавать в hex, rgb, rgba, hsl, hsla или через currentColor.

Для интерфейсов чаще всего используют пиксели, потому что с ними легче поддерживать единый ритм теней в дизайн-системе. Например:

.button {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.modal {
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
}

Как добавить тень к элементу через box-shadow

Добавить тень к элементу можно, если присвоить ему свойство box-shadow с двумя обязательными смещениями и, как правило, с цветом для предсказуемого результата.

Самый короткий рабочий пример:

.box {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Если применить его к блоку:

<div class="box">Карточка</div>

Элемент получит мягкую внешнюю тень. На практике процесс состоит из 4 шагов:

1. Выберите элемент, который должен визуально «подняться» над фоном.
2. Задайте смещение по Y, чтобы тень выглядела естественно, например 4px, 8px или 12px.
3. Добавьте blur-radius, иначе тень будет слишком жёсткой.
4. Используйте полупрозрачный цвет, а не чисто чёрный без альфа-канала.

Пример более аккуратной карточки:

.product-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
}

В реальных интерфейсах именно прозрачность определяет качество тени. Значение rgba(0, 0, 0, 0.5) почти всегда выглядит грубее, чем rgba(2, 6, 23, 0.12), хотя формально оба варианта «работают».

Я почти всегда начинаю не с больших размытия и смещения, а с вопроса: какую высоту должен почувствовать пользователь? Если элемент просто кликабелен, достаточно очень мягкой тени. Если это модальное окно, глубина должна быть заметной уже с первого взгляда.

Тень через CSS box-shadow в другой форме: основные виды и сценарии применения

Тень через CSS box-shadow делится на внешнюю, внутреннюю, одиночную и многослойную, и каждый вид решает свою визуальную задачу.

Внешняя тень

Внешняя тень рисуется снаружи элемента и используется чаще всего для карточек, меню, выпадающих списков и диалоговых окон.

.dropdown {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

Внутренняя тень

Внутренняя тень создаётся с помощью inset и хорошо подходит для полей ввода, утопленных кнопок и декоративных панелей.

.input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

Многослойная тень

Многослойная тень — это несколько теней через запятую, которые вместе создают более естественную глубину.

.panel {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

Такой подход часто выглядит лучше одной массивной тени. Причина в том, что в реальном мире тени редко бывают однородными: у объекта есть контактная тень рядом с поверхностью и более мягкое рассеивание дальше. Это близко к тому, как человеческое зрение считывает форму и расстояние.

Тень для фокуса и доступности

Тень для фокуса помогает пользователю увидеть активный элемент клавиатурной навигации и часто служит заменой или дополнением к outline.

.field:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35);
}

Согласно WebAIM Million, в анализе 1 000 000 главных страниц, опубликованном в 2024 году, низкий контраст текста с фоном оставался самой распространённой проблемой доступности, встречаясь на 81% главных страниц. Это не прямое исследование теней, но оно напоминает важную вещь: декоративные эффекты не должны мешать читаемости и состояниям фокуса. Если тень делает интерфейс красивее, но ухудшает восприятие активных элементов, её нужно пересматривать.

Как подобрать параметры тени: смещение, размытие, spread и цвет

Подбор параметров тени — это настройка глубины элемента через четыре главные переменные: направление, мягкость, площадь и плотность цвета.

Смещение по X и Y

Смещение показывает, где расположена тень относительно элемента. В интерфейсах чаще используют положительное значение по Y, потому что тень «падает» вниз.

Примеры:

• 0 2px — лёгкая кнопка или инпут
• 0 8px — карточка среднего уровня
• 0 24px — модальное окно или всплывающая панель

Blur-radius

Blur-radius определяет мягкость края. Чем больше значение, тем более воздушной выглядит тень.

Если сравнить тень с акварелью, blur-radius — это степень растекания по влажной бумаге. Малое значение — резкий след кисти, большое — мягкое цветовое облако.

Spread-radius

Spread-radius изменяет реальный размер тени до размытия, поэтому полезен для фокус-колец, декоративных ореолов и особых состояний.

.chip:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

Цвет тени

Цвет тени должен учитывать фон, температуру интерфейса и общий контраст, а не быть автоматически чёрным.

На светлых холодных интерфейсах часто лучше работают оттенки синевато-серого, например rgba(15, 23, 42, 0.12), вместо нейтрального rgba(0, 0, 0, 0.12). На тёплых кремовых фонах могут органичнее смотреться слегка коричневатые тени.

Практические примеры box-shadow для кнопок, карточек и модальных окон

Практические примеры box-shadow показывают, что разные компоненты требуют разной глубины и разной плотности тени.

Кнопка с hover и active

.btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
  transform: translateY(-1px);
}

.btn:active {
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
  transform: translateY(0);
}

Карточка товара

.card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(2, 6, 23, 0.06),
    0 12px 30px rgba(2, 6, 23, 0.1);
}

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

.modal {
  background: #fff;
  border-radius: 20px;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.08),
    0 30px 60px rgba(0, 0, 0, 0.2);
}

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

Из моего опыта, самая частая ошибка — пытаться сделать интерфейс «дороже» с помощью огромных теней. Обычно эффект обратный: элемент выглядит не премиальным, а расплывчатым. Почти всегда лучше две слабые тени, чем одна тяжёлая.

Частые ошибки при использовании box-shadow

Частые ошибки при использовании box-shadow связаны с чрезмерной контрастностью, неестественным направлением света и отсутствием системы уровней глубины.

Ошибка 1: чисто чёрная тень с высокой непрозрачностью

Такой вариант делает интерфейс грубым и устаревшим.

.bad {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

Ошибка 2: одинаковая тень у всех элементов

Если кнопка, карточка и модальное окно имеют одну и ту же тень, визуальная иерархия разрушается.

Ошибка 3: слишком большое размытие без логики

Сильное размытие создаёт мутное пятно, а не ощущение слоя.

Ошибка 4: игнорирование border-radius

Тень должна соответствовать форме элемента. Если у карточки скругление 20px, а тень выглядит визуально как у жёсткого прямоугольника, появляется зрительный конфликт.

Ошибка 5: замена focus-стилей только декоративной тенью

Фокус должен быть заметным, а не просто красивым. Особенно это важно для клавиатурной навигации.

Производительность, рендеринг и когда box-shadow может тормозить

Box-shadow может влиять на производительность, если тени большие, многочисленные и применяются к большому количеству элементов одновременно.

Особенно осторожно стоит использовать:

1. Очень большие blur-radius, например 80px и выше.
2. Много карточек с тяжёлыми тенями в длинных списках.
3. Анимации тени на десятках элементов сразу.

С точки зрения рендеринга тень — это не просто «цветной ореол», а дополнительная работа браузера по отрисовке размытой области. Если на странице 100 карточек со сложной многослойной тенью, стоимость отрисовки растёт. Поэтому для каталога или таблицы лучше использовать умеренные значения.

Практический совет:

• для больших списков используйте одну лёгкую тень;
• сильные тени оставляйте для ключевых компонентов;
• анимируйте box-shadow умеренно, лучше вместе с transform, а не вместо него.

Box-shadow и дизайн-система: как выстроить шкалу глубины

Шкала глубины — это набор заранее определённых теней для разных уровней интерфейса, который делает дизайн единым и предсказуемым.

Вместо случайных значений лучше задать 4–5 уровней elevation:

1. Level 1 — инпуты, маленькие кнопки
2. Level 2 — карточки
3. Level 3 — dropdown, popover
4. Level 4 — модальные окна
5. Level 5 — крупные overlay-компоненты

Пример системы:

:root {
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 4px 10px rgba(15, 23, 42, 0.08), 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 10px 24px rgba(15, 23, 42, 0.12), 0 20px 40px rgba(15, 23, 42, 0.1);
  --shadow-4: 0 18px 40px rgba(15, 23, 42, 0.16), 0 32px 64px rgba(15, 23, 42, 0.14);
}

.card {
  box-shadow: var(--shadow-2);
}

.modal {
  box-shadow: var(--shadow-4);
}

Такой подход ускоряет разработку, уменьшает количество визуальных ошибок и упрощает масштабирование проекта.

Чем box-shadow отличается от filter: drop-shadow()

Box-shadow рисует тень вокруг рамки элемента, а filter: drop-shadow() строит тень по видимой форме изображения или графики.

Это ключевое различие. Если у вас обычный блок с фоном и радиусом скругления, box-shadow удобнее и понятнее. Если же нужно добавить тень PNG с прозрачностью или сложной фигуре, drop-shadow() часто даёт более точный результат.

Итоги: как правильно использовать box-shadow без визуального шума

Правильное использование box-shadow — это умеренная, системная и функциональная тень, которая усиливает интерфейс, а не отвлекает от него.

Если свести всё к короткой памятке, то рабочий подход выглядит так:

1. Начинайте с задачи, а не с эффекта: что именно должна показать тень.
2. Используйте мягкие полупрозрачные цвета вместо тяжёлого чёрного.
3. Разделяйте уровни глубины для кнопок, карточек и модальных окон.
4. Предпочитайте две лёгкие тени одной грубой.
5. Не жертвуйте доступностью ради декоративности.
6. Проверяйте тени на светлом и тёмном фонах, а также в реальных макетах, а не только изолированно.

Box-shadow — это не просто украшение, а инструмент управления вниманием. Хорошая тень почти незаметна сама по себе, но заметно улучшает восприятие интерфейса целиком. Именно поэтому аккуратно настроенный box-shadow часто работает сильнее, чем сложные декоративные эффекты: он не кричит, а направляет взгляд.