💡 CSS box-shadow: 13 готовых теней для карточек, кнопок и модальных окон

Q: В чём разница между box-shadow и filter: drop-shadow()?

box-shadow следует форме bounding box элемента, всегда прямоугольник. filter: drop-shadow() идёт за альфа-каналом и повторяет фактическую форму: у PNG с прозрачностью тень ляжет по контуру объекта, а не по прямоугольной рамке. Поэтому drop-shadow() незаменим для изображений с вырезанным фоном, иконок и SVG. Но он работает медленнее, браузер анализирует пиксели, а не геометрию блока.

Плоские блоки, кнопки без глубины, карточки, сливающиеся с фоном, типичная картина сайта, где дизайнер пощадил box-shadow. Между тем пара строк CSS способна превратить унылую вёрстку в интерфейс с характером: добавить воздух, выделить ключевой блок или мягко отделить секцию без единого border.

Проблема в том, что большинство разработчиков останавливается на дефолтной серой тени 0px 2px 5px rgba(0,0,0,0.2) и забывает, что box-shadow умеет гораздо больше: многослойные тени, цветные свечения, неоморфизм, inset-эффекты и даже отрисовку пиксель-арта без единого div.

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

💡 Быстрый обзор:

Разбираем синтаксис box-shadow так, чтобы запомнить с первого раза
13 готовых сниппетов: от едва заметной рамки до многослойного разноцветного свечения
Три способа подключить CSS к HTML и когда использовать каждый
Частые вопросы: производительность, filter drop-shadow, инспектор Chrome и неоморфизм

Что такое box-shadow и как он работает

Свойство box-shadow добавляет одну или несколько теней к элементу. В отличие от border, тень не влияет на поток документа и не увеличивает размеры блока, она рисуется «снаружи», за границами элемента.

Полный синтаксис:

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

Разбор каждого параметра:

offset-x, смещение по горизонтали. Положительное значение сдвигает тень вправо, отрицательное, влево.
offset-y, смещение по вертикали. Положительное, вниз, отрицательное, вверх. Это два единственных обязательных параметра.
blur-radius, радиус размытия. Чем больше значение, тем мягче и шире тень. По умолчанию 0, тень с резкими краями.
spread-radius, радиус распространения. Положительное значение расширяет тень наружу, отрицательное, сжимает внутрь. Полезно для имитации рамок без border.
color, цвет в любом формате: hex, rgb(), rgba(), hsl(). Прозрачность через rgba() или hsla() даёт самые естественные тени.

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

1. Едва заметная тень с трёх сторон

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

1 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Смещение только вниз на 8px и большое размытие 24px создают эффект парящего блока. Прозрачность 0.2 делает тень едва различимой на белом, ровно столько, чтобы глазу было комфортно.

2. Лёгкая тень со всех сторон

Когда блоку нужна тень равномерно по периметру, например, для модального окна или всплывающей подсказки.

1 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Нулевое горизонтальное смещение и spread-radius 0px распределяют тень симметрично. Большой blur-radius (29px) делает переход плавным. Цвет rgba(100, 100, 111, ...) даёт холодный серый оттенок, он лучше смотрится на белом, чем чистый чёрный.

3. Тонкая тень справа-снизу

Классический «приподнятый» эффект. Работает для кнопок, карточек с hover-состоянием и любого элемента, который должен выглядеть тактильно.

1 box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Маленькие значения смещения (около 2px) и небольшой blur создают резкую, почти векторную тень. Хорошо сочетается с transform: translateY(-2px) на hover, тень «едет» вместе с блоком, усиливая эффект подъёма.

4. Насыщенная тень со всех сторон

Для случаев, когда элемент должен заметно отделяться от фона: hero-секции, карточки с важным контентом, баннеры.

1 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Высокая непрозрачность (0.35) и небольшой blur (15px) дают выраженную, читаемую тень. С нулевым горизонтальным смещением она ложится ровно, блок выглядит так, будто парит над страницей.

5. Рассеянная многослойная тень

Пять слоёв теней, работающих вместе: одна глубокая для отрыва от фона, остальные, для мягкого рассеивания по сторонам.

1 box-shadow:
2   rgba(0, 0, 0, 0.25) 0px 54px 55px,
3   rgba(0, 0, 0, 0.12) 0px -12px 30px,
4   rgba(0, 0, 0, 0.12) 0px 4px 6px,
5   rgba(0, 0, 0, 0.17) 0px 12px 13px,
6   rgba(0, 0, 0, 0.09) 0px -3px 5px;

Первый слой, основная тень вниз (54px, непрозрачность 0.25). Второй, лёгкая тень вверх (отрицательное смещение -12px). Остальные дорабатывают края. Вместе они дают сложный, реалистичный светотеневой рисунок, как у физического объекта под рассеянным освещением.

6. Тонкая рамка с внутренней тенью

Две тени создают иллюзию тонкой рамки (border) и одновременно добавляют глубину. Ни одного border в коде.

1 box-shadow:
2   rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3   rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4   rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Разбор трёх слоёв:

Первый, «рамка»: нулевое смещение и размытие, spread-radius 2px имитирует border: 2px solid.
Второй, основная тень вниз для объёма.
Третий, белая inset-тень сверху, даёт блик (стеклянный эффект).

7. Тень слева-снизу

Нестандартное направление, тень падает влево и чуть вниз. Хорошо смотрится на элементах, выровненных по правому краю, или для создания асимметричной композиции.

1 box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Отрицательное горизонтальное смещение (-4px) отправляет тень влево. Отрицательный spread-radius (-6px) поджимает тень внутрь, делая её компактнее самого блока, она не «вылезает» за края.

8. Двусторонняя тень: свет сверху-слева, тень снизу-справа

Имитация направленного источника света, как будто лампа светит из левого верхнего угла.

1 box-shadow:
2   rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3   rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Первый слой, голубоватая тень (rgba(136, 165, 191, ...)) справа-снизу. Второй, белая «подсветка» слева-сверху (отрицательные смещения, высокая непрозрачность). Вместе они создают реалистичный трёхмерный эффект, блок словно освещён софтбоксом.

9. Цветная рамка-свечение

Одна тень с нулевым смещением и размытием, но с положительным spread-radius, получается аккуратное цветное свечение вокруг элемента.

1 box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Синее свечение (rgba(3, 102, 214, ...)) радиусом 3px. Идеально для инпутов в фокусе (:focus), активных кнопок и выделения текущего пункта меню. Замените цвет на rgba(220, 38, 38, 0.3), получите валидационную подсветку ошибки.

10. Двойная внутренняя тень для эффекта «вдавленности»

Два inset-слоя создают глубокий вогнутый эффект. Подходит для текстурных фонов, нажатых кнопок и декоративных панелей.

1 box-shadow:
2   rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3   rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Ключевое слово inset переносит тень внутрь элемента. Первый слой, широкая тень сверху. Второй, более тёмная и сжатая, тоже сверху. Отрицательный spread-radius (-12px, -18px) не даёт теням заполнить весь блок, края остаются светлыми, а центр утоплен.

11. Цветной «каскад» теней вниз

Пять слоёв одного цвета с нарастающим смещением создают эффект многослойной цветной тени, как в Material Design, но ярче.

1 box-shadow:
2   rgba(240, 46, 170, 0.4) 0px 5px,
3   rgba(240, 46, 170, 0.3) 0px 10px,
4   rgba(240, 46, 170, 0.2) 0px 15px,
5   rgba(240, 46, 170, 0.1) 0px 20px,
6   rgba(240, 46, 170, 0.05) 0px 25px;

Каждый следующий слой сдвинут на 5px дальше и имеет меньшую непрозрачность. Размытие не задано, тени резкие, как векторные полосы. Это даёт яркий неоновый след за блоком. Замените розовый на брендовый цвет, получите узнаваемый акцент.

12. Цветной «каскад» вправо-вниз

Та же техника, но с горизонтальным смещением, тень уходит по диагонали.

1 box-shadow:
2   rgba(240, 46, 170, 0.4) 5px 5px,
3   rgba(240, 46, 170, 0.3) 10px 10px,
4   rgba(240, 46, 170, 0.2) 15px 15px,
5   rgba(240, 46, 170, 0.1) 20px 20px,
6   rgba(240, 46, 170, 0.05) 25px 25px;

Диагональный каскад создаёт ощущение движения вправо-вниз. Хорошо смотрится на кнопках при наведении, блок словно «съезжает» за своей тенью.

13. Рассеянная тень с градиентом плотности

Пять слоёв, в которых каждое следующее смещение удваивается (2px, 4px, 8px, 16px, 32px), а непрозрачность постоянна. Результат, тень с плавным градиентом плотности, самая реалистичная в подборке.

1 box-shadow:
2   rgba(0, 0, 0, 0.09) 0px 2px 1px,
3   rgba(0, 0, 0, 0.09) 0px 4px 2px,
4   rgba(0, 0, 0, 0.09) 0px 8px 4px,
5   rgba(0, 0, 0, 0.09) 0px 16px 8px,
6   rgba(0, 0, 0, 0.09) 0px 32px 16px;

Маленький blur у каждого слоя (1px, 2px, 4px, 8px, 16px) растёт пропорционально смещению. Получается физически точное рассеивание, тень «тает» с расстоянием, как в реальном мире. Идеально для карточек, которые должны выглядеть максимально натурально.

Три способа подключить CSS к HTML

Когда сниппет выбран, его нужно добавить на страницу. CSS даёт три варианта, и у каждого своя ниша.

Правила помещаются в тег <style> внутри <head> HTML-документа. Подходит для одностраничных сайтов и быстрых прототипов, всё лежит в одном файле.

1 <html lang="ru">
2 <head>
3   <meta charset="utf-8">
4   <title>CSS box-shadow — примеры</title>
5   <style>
6     .card {
7       display: block;
8       margin: 0 auto;
9       box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10     }
11   </style>
12 </head>
13 <body>
14   <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15 </body>
16 </html>

Минус, стили не кешируются браузером отдельно и их нельзя переиспользовать на других страницах.

Встроенный CSS (Inline)

Стили пишутся прямо в атрибуте style HTML-элемента. Самый быстрый способ «на лету», но и самый неудобный в поддержке.

1 <img
2   src="screenshot.jpg"
3   alt="Пример карточки с тенью"
4   style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5 >

Используйте inline-стили точечно: для динамических значений из JavaScript, для email-вёрстки (где внешние таблицы стилей часто вырезаются почтовыми клиентами) и для критического CSS «above the fold».

Внешний CSS (External)

Правила выносятся в отдельный .css-файл и подключаются через <link>. Это стандарт для любого проекта сложнее одностраничника.

Файл styles.css:

1 .card {
2   display: block;
3   margin: 0 auto;
4   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5 }

HTML-документ:

1 <html lang="ru">
2 <head>
3   <meta charset="utf-8">
4   <title>CSS box-shadow — примеры</title>
5   <link rel="stylesheet" href="styles.css">
6 </head>
7 <body>
8   <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9 </body>
10 </html>

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

Короткое, но плотное видео (8 минут): автор показывает, как заменить плоские серые тени на градиентные свечения, слой за слоем, с объяснением каждого параметра.

⁉️🤔 Частые вопросы

В чём разница между box-shadow и filter: drop-shadow()?

box-shadow следует форме bounding box элемента, всегда прямоугольник. filter: drop-shadow() идёт за альфа-каналом и повторяет фактическую форму: у PNG с прозрачностью тень ляжет по контуру объекта, а не по прямоугольной рамке. Поэтому drop-shadow() незаменим для изображений с вырезанным фоном, иконок и SVG. Но он работает медленнее, браузер анализирует пиксели, а не геометрию блока.

Сколько слоёв box-shadow можно задать без потери производительности?

Формального лимита нет, но практический потолок на среднестатистическом устройстве, 10-15 слоёв. Дальше вы начнёте замечать просадку FPS при скролле и анимациях, особенно на мобильных устройствах. Причина в том, что каждый слой требует отдельного прохода рендеринга. Для анимируемых элементов ограничьтесь 2-3 слоями и используйте will-change: box-shadow, это подскажет браузеру вынести элемент на отдельный композитный слой.

Как посмотреть и отладить box-shadow в Chrome DevTools?

Откройте DevTools (F12), выберите элемент на вкладке Elements, справа найдите свойство box-shadow в панели Styles. Кликните по иконке цветового квадрата рядом со значением, откроется визуальный редактор теней с ползунками offset-x, offset-y, blur и spread. Можно менять значения мышью и сразу видеть результат. Для многослойных теней каждый слой редактируется отдельно, они перечислены в том же поле через запятую.

Что такое неоморфизм и как его сделать на box-shadow?

Неоморфизм, визуальный стиль, где элементы выглядят так, будто они «вылеплены» из того же материала, что и фон. Достигается двумя тенями: светлой сверху-слева и тёмной снизу-справа (как в приёме №8). Ключевое условие, фон страницы и цвет элемента должны совпадать или быть очень близкими. Пример для светлой темы:

1 > .neuromorphic {
2 >   background: #e0e0e0;
3 >   box-shadow:
4 >     8px 8px 16px #bebebe,
5 >     -8px -8px 16px #ffffff;
6 > }
7 > ```

plaintext

1  
2  markdown 
3  
4 Стиль эффектный, но спорный с точки зрения accessibility: слабый контраст делает элементы плохо различимыми для людей с нарушениями зрения. Используйте дозированно и обязательно проверяйте контрастность.
5  
6 **Можно ли использовать box-shadow для отрисовки фигур без div?**
7  
8 > Да, и это отдельный жанр CSS-арта. Поскольку `box-shadow` поддерживает бесконечное количество слоёв, каждый со своими координатами и цветом, вы можете «нарисовать» пиксель-арт одним `box-shadow` на одном `div`. Техника работает так: каждый слой со смещением 1px × N и нулевым blur, это один «пиксель». Сотни слоёв складываются в изображение. Генераторы вроде [CSS Box Shadow Generator](https://getcssscan.com/css-box-shadow-examples) автоматизируют процесс, но для продакшена это скорее забава, SVG справится эффективнее.
9  
10 &#35;&#35; Какую тень выбрать для вашего проекта?
11  
12 Тринадцать приёмов выше закрывают весь спектр: от незаметной тени для скромных карточек до дерзкого неонового каскада. Ключевой навык здесь не запомнить все сниппеты, а понять логику параметров, тогда вы соберёте нужную тень под задачу быстрее, чем найдёте готовую.
13  
14 Короткий ориентир:
15  
16 - Нужна глубина без визуального шума, берите приёмы **1-3** (едва заметные одиночные тени).
17 - Хочется реалистичного «парения» над страницей, **5** (многослойная рассеянная) или **13** (градиент плотности).
18 - Выделить интерактивный элемент цветом, **9** (цветная рамка) или **11-12** (цветной каскад).
19 - Имитировать вдавленность/стекло, **6** и **10** (inset-тени).
20 - Нужен неоморфизм, **8** (двусторонняя тень) плюс фон в тон.
21  
22 Сохраните эту страницу в закладки как шпаргалку. А если соберёте свой фирменный рецепт тени, тестируйте его на реальных устройствах: одна и та же тень на Retina-экране и на бюджетном офисном мониторе может выглядеть совершенно по-разному.