Властивість CSS box-shadow додає зовнішню або внутрішню тінь до елемента, допомагаючи створити глибину, візуальну ієрархію та акуратні акценти без використання графіки. На практиці це один із найкорисніших інструментів сучасного інтерфейсного дизайну: за допомогою кількох чисел і кольору можна зробити кнопку виразнішою, картку — “піднятою” над фоном, а форму — легшою для сприйняття. Якщо пояснити просто, box-shadow працює як освітлення в кімнаті: той самий предмет виглядає по-різному залежно від того, звідки падає світло, наскільки воно м’яке і яка щільність тіні. Саме тому важливо не просто знати синтаксис, а розуміти логіку цієї властивості.
Що таке box-shadow у CSS і для чого він потрібен
Box-shadow — це CSS-властивість для створення тіні навколо блочного елемента, яка покращує читабельність інтерфейсу та підсилює візуальну ієрархію. Вона дозволяє задати зміщення тіні по осях, розмиття, розширення та колір, а також застосовувати кілька тіней одночасно.
Тінь використовується не лише “для краси”. У дизайні інтерфейсів вона виконує функціональну роль: підказує, які елементи активні, на що можна натиснути, що знаходиться на передньому плані, а що — на задньому. З погляду UX це важливо, бо людський мозок швидко зчитує глибину й контраст ще до того, як користувач почне читати текст.
У рекомендаціях Material Design від Google тіні застосовуються для передачі “elevation” — візуальної висоти елемента над поверхнею. Це стало однією з причин, чому box-shadow так активно використовують у кнопках, карточках, модальних вікнах і випадаючих списках.
Де box-shadow використовується найчастіше
- Кнопки та CTA-елементи.
- Картки товарів і новин.
- Форми, поля вводу та блоки авторизації.
- Модальні вікна та спливаючі панелі.
- Зображення, аватари, бейджі та теги.
Який візуальний ефект створює тінь
Тінь додає відчуття простору, відокремлює об’єкт від фону та робить композицію менш пласкою. Це особливо корисно на світлих інтерфейсах, де білому блоку часто бракує контрасту з фоном.
Я часто бачу одну й ту саму помилку: тінь роблять занадто темною і різкою. У реальних інтерфейсах м’яка тінь майже завжди виглядає дорожче, чистіше й професійніше.
Як додати тінь до елемента через box-shadow
Додати тінь до елемента через box-shadow можна, вказавши властивість у CSS із параметрами зміщення, розмиття, розширення та кольору. Найпростіший варіант — задати горизонтальне і вертикальне зміщення та колір тіні.
Базовий синтаксис
.card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}У цьому прикладі тінь не зміщується по осі X, зміщується на 4 пікселі вниз по осі Y, має розмиття 12 пікселів і напівпрозорий чорний колір.
Повна форма запису
.card {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}Параметри читаються зліва направо:
- offset-x — зміщення по горизонталі.
- offset-y — зміщення по вертикалі.
- blur-radius — ступінь розмиття.
- spread-radius — розширення або стискання тіні.
- color — колір тіні.
Приклад із усіма параметрами
.box {
box-shadow: 8px 12px 24px 2px rgba(0, 0, 0, 0.18);
}Тут тінь зміщується вправо на 8 пікселів, вниз на 12, розмивається на 24 і трохи розширюється на 2 пікселі. Такий формат добре підходить для карток, що мають виглядати “піднятими” над поверхнею.
Параметри тіні: зміщення, blur, spread, колір і inset
Параметри box-shadow визначають форму, інтенсивність і напрямок тіні, а також дозволяють зробити її внутрішньою. Якщо розуміти роль кожного параметра окремо, налаштовувати тіні стає значно простіше.
Таблиця параметрів box-shadow
| Параметр | Що робить | Приклад значення |
|---|---|---|
| offset-x | Зсуває тінь вліво або вправо | 4px |
| offset-y | Зсуває тінь вгору або вниз | 8px |
| blur-radius | Робить край тіні м’якшим | 16px |
| spread-radius | Збільшує або зменшує площу тіні | 2px |
| color | Задає відтінок і прозорість | rgba(0, 0, 0, 0.2) |
| inset | Робить тінь внутрішньою | inset |
Що таке inset і коли його застосовувати
Inset — це ключове слово, яке перетворює зовнішню тінь на внутрішню, створюючи ефект заглиблення елемента. Такий прийом часто використовують для полів введення, активних вкладок або декоративних панелей.
.input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}Внутрішня тінь добре працює там, де потрібно показати, що поверхня ніби втоплена всередину. Якщо зовнішня тінь “піднімає” елемент, inset навпаки “садить” його глибше.
Чому прозорість важливіша за чорний колір
У більшості сучасних інтерфейсів тіні будують не на суцільному чорному, а на напівпрозорому кольорі через rgba() або hsla(). Це дає природніший вигляд і краще поєднується з різними фонами. Занадто щільна тінь виглядає штучно, особливо на світлих сторінках.
Тіней у CSS box-shadow може бути кілька: як працює багатошарова тінь
Box-shadow підтримує кілька тіней одночасно, якщо перелічити їх через кому. Саме багатошарова тінь дозволяє створювати м’які, глибокі й більш реалістичні ефекти, ніж одна різка тінь.
Один шар може задавати легкий контур біля краю елемента, а другий — м’яку далеку тінь для глибини. Це схоже на сценічне освітлення: рідко працює лише один прожектор, зазвичай ефект формується комбінацією кількох джерел світла.
.card {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.12);
}Переваги кількох тіней
- Більш природний і “дорогий” вигляд.
- Кращий контроль над ближнім і дальнім шаром тіні.
- Можливість поєднати контур, glow і глибину в одному правилі.
Приклад для кнопки з hover-ефектом
.button {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.button:hover {
transform: translateY(-1px);
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.14),
0 10px 24px rgba(0, 0, 0, 0.12);
}Такий hover не лише красиво виглядає, а й підсилює відчуття інтерактивності. Це важливо психологічно: люди краще реагують на інтерфейси, які дають швидкий і передбачуваний візуальний відгук на дію.
Які значення box-shadow використовувати для кнопок, карток і форм
Для кнопок, карток і форм найкраще працюють помірні значення box-shadow з невисокою непрозорістю, бо вони покращують читабельність без перевантаження інтерфейсу. Замість випадкових чисел варто спиратися на повторювану систему тіней.
Рекомендовані готові варіанти
| Елемент | Приклад тіні | Ефект |
|---|---|---|
| Кнопка | 0 2px 8px rgba(0, 0, 0, 0.12) | Легка інтерактивність |
| Картка | 0 8px 24px rgba(0, 0, 0, 0.10) | Помітна глибина |
| Форма | 0 4px 16px rgba(0, 0, 0, 0.08) | М’яке відокремлення від фону |
| Модальне вікно | 0 20px 60px rgba(0, 0, 0, 0.18) | Акцент на передньому плані |
Практичне спостереження з реальної роботи
У реальних макетах дизайнери та верстальники часто зменшують непрозорість тіні після першого тесту на живому фоні. На статичному макеті тінь може виглядати стримано, але в браузері — особливо на великому моніторі — вона виявляється надто важкою. Тому безпечний підхід: спершу задати трохи слабшу тінь, а потім підсилити її за потреби, а не навпаки.
Коли я підбираю тінь для картки, то майже завжди починаю не з великих значень blur, а з прозорості. Якщо opacity підібрана правильно, навіть проста тінь виглядає акуратно.
Як box-shadow впливає на дизайн, UX і сприйняття інтерфейсу
Box-shadow впливає на дизайн і UX через візуальну ієрархію, контраст і відчуття взаємодії з елементами. Грамотно налаштована тінь допомагає користувачу швидше зрозуміти структуру сторінки та знайти ключові зони уваги.
Людська система зору природно інтерпретує тіні як ознаку глибини. Це пов’язано з тим, як мозок обробляє світло, форму й просторові підказки. Саме тому елемент із легкою тінню часто сприймається як більш “доступний” для натискання, ніж такий самий, але повністю плаский.
Що саме покращує тінь
- Відокремлює блок від фону.
- Підсилює акцент на головних елементах.
- Допомагає показати стани: normal, hover, active.
- Робить інтерфейс менш монотонним.
Коли тінь шкодить
Проблеми виникають, коли тінь занадто темна, занадто розмита або застосована до всіх елементів без системи. У такому разі сторінка виглядає шумною, а не структурованою. Якщо тінь є всюди, вона перестає бути сигналом важливості.
Чим box-shadow відрізняється від filter: drop-shadow
Box-shadow створює тінь навколо рамки елемента, а filter: drop-shadow працює з видимою формою зображення або об’єкта, враховуючи прозорі області. Це ключова різниця, яку важливо розуміти під час роботи з PNG, SVG та нестандартними формами.
Порівняльна таблиця
| Властивість | Як працює | Коли використовувати |
|---|---|---|
| box-shadow | Тінь навколо прямокутної моделі елемента | Кнопки, блоки, картки, форми |
| filter: drop-shadow() | Тінь за реальною формою видимого контенту | Іконки, PNG із прозорістю, SVG |
Приклад із drop-shadow
.icon {
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}Якщо у вас є кругла іконка на прозорому фоні, drop-shadow часто дає точніший результат. Для стандартних блоків, контейнерів і компонентів зручніше й передбачуваніше використовувати саме box-shadow.
Поширені помилки під час роботи з box-shadow у CSS
Найпоширеніші помилки з box-shadow — надмірна інтенсивність, відсутність системності та невдале поєднання з фоном. Їх легко уникнути, якщо налаштовувати тіні як частину дизайн-системи, а не як випадковий декоративний ефект.
Типові помилки
- Дуже темний колір без прозорості.
- Надто велике розмиття без потреби.
- Однакова сильна тінь для дрібних і великих елементів.
- Використання тіні там, де вистачило б border.
- Відсутність hover-стану у кнопок, де тінь має підсилювати інтерактивність.
Невдалий і кращий приклади
.bad-card {
box-shadow: 0 0 40px #000;
}
.good-card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}У другому випадку тінь виглядає значно природніше. Вона не “з’їдає” простір навколо елемента й не перетягує на себе всю увагу.
Як оптимізувати box-shadow для адаптивного дизайну та продуктивності
Оптимізація box-shadow полягає у використанні помірних значень, логічної кількості шарів і тестуванні на різних екранах. Хоча сучасні браузери добре працюють із тінями, надмірно складні ефекти можуть ускладнювати рендеринг, особливо в анімаціях.
Практичні рекомендації
- Не анімуйте дуже важкі багатошарові тіні на великій кількості елементів.
- Для мобільних пристроїв використовуйте трохи м’якші й простіші тіні.
- Перевіряйте контраст на світлому й темному фонах.
- Створіть 3–5 рівнів тіней і використовуйте їх повторно в усьому проєкті.
Приклад системи тіней
:root {
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.14);
}
.card {
box-shadow: var(--shadow-md);
}
.modal {
box-shadow: var(--shadow-lg);
}Такий підхід підвищує консистентність дизайну. Крім того, коли тіні стандартизовані, легше підтримувати чистий інтерфейс і швидше вносити зміни в майбутньому.
Готові приклади box-shadow для швидкого використання
Готові приклади box-shadow допомагають швидко впровадити акуратні тіні без тривалого ручного підбору значень. Це зручно для старту, особливо якщо потрібно оперативно оформити UI-компоненти.
Легка тінь для картки
.card-light {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}М’яка тінь для форми входу
.login-box {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}Акцентна тінь для кнопки
.btn-primary {
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}Внутрішня тінь для поля вводу
.input {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}Подвійна тінь для модального вікна
.modal {
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 24px 60px rgba(0, 0, 0, 0.18);
}Висновок
Box-shadow у CSS — це не просто декоративна властивість, а повноцінний інструмент побудови зрозумілого, сучасного й візуально якісного інтерфейсу. Він допомагає додати тінь до елемента, показати глибину, відокремити блоки від фону, підсилити інтерактивність і зробити структуру сторінки більш очевидною для користувача. Щоб тіні працювали на результат, важливо контролювати зміщення, розмиття, spread, прозорість і кількість шарів, а також використовувати їх системно. Найкращий ефект дають м’які, стримані тіні, які підтримують контент, а не змагаються з ним. Якщо запам’ятати цю логіку, box-shadow стане одним із найсильніших і найзручніших інструментів у вашому CSS-наборі.