💡 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 }

markdown

Стиль ефектний, але спірний з погляду accessibility: слабкий контраст робить елементи погано розрізнюваними для людей з порушеннями зору. Використовуйте дозовано і обовʼязково перевіряйте контрастність.

Чи можна використовувати box-shadow для відмальовування фігур без div?

Так, і це окремий жанр CSS-арту. Оскільки box-shadow підтримує нескінченну кількість шарів, кожен зі своїми координатами і кольором, ви можете «намалювати» піксель-арт одним box-shadow на одному div. Техніка працює так: кожен шар зі зміщенням 1px × N і нульовим blur, це один «піксель». Сотні шарів складаються в зображення. Генератори на кшталт CSS Box Shadow Generator автоматизують процес, але для продакшену це радше забавка, SVG впорається ефективніше.

Яку тінь обрати для вашого проєкту?

Тринадцять прийомів вище закривають весь спектр: від непомітної тіні для скромних карток до зухвалого неонового каскаду. Ключова навичка тут не запамʼятати всі сніпети, а зрозуміти логіку параметрів, тоді ви зберете потрібну тінь під завдання швидше, ніж знайдете готову.

Короткий орієнтир:

Потрібна глибина без візуального шуму, беріть прийоми 1-3 (ледь помітні поодинокі тіні).
Хочеться реалістичного «ширяння» над сторінкою, 5 (багатошарова розсіяна) або 13 (градієнт щільності).
Виділити інтерактивний елемент кольором, 9 (кольорова рамка) або 11-12 (кольоровий каскад).
Імітувати вдавленість/скло, 6 і 10 (inset-тіні).
Потрібен неоморфізм, 8 (двостороння тінь) плюс фон у тон.

Збережіть цю сторінку в закладки як шпаргалку. А якщо зберете свій фірмовий рецепт тіні, тестуйте його на реальних пристроях: та сама тінь на Retina-екрані і на бюджетному офісному моніторі може виглядати абсолютно по-різному.