Як користуватися

Виберіть пресет або налаштуйте зміщення, розмиття, розширення, колір і непрозорість першого шару.
Додайте шари для природнішої глибини або позначте «Внутрішня тінь».
Налаштуйте тло попереднього перегляду й колір блока відповідно до свого дизайну, а потім скопіюйте CSS.

Як це працює

Для кожного шару властивість box-shadow задає горизонтальне зміщення, вертикальне зміщення, радіус розмиття, радіус розширення та колір; перед ними за потреби можна вказати inset. Додатні значення зміщення переміщують тінь праворуч і вниз. Розмиття пом’якшує краї й не може бути від’ємним; розширення збільшує або зменшує тінь перед розмиттям. Кілька шарів розділяються комами, а перший відображається зверху.

Для реалістичного ефекту зазвичай поєднують невелику чітку тінь із більшою та м’якшою тінню з низькою непрозорістю — саме так працює пресет «Піднятий». Кольори задаються у форматі rgba(), щоб непрозорість була явною. Тіні повторюють border-radius елемента й не займають місця в макеті, тож не зсувають інші елементи.

Дуже велике розмиття для багатьох елементів може сповільнити прокручування на малопотужних телефонах. Якщо потрібно анімувати тінь, зазвичай плавніше змінювати прозорість псевдоелемента, у якого вже є тінь, ніж анімувати сам box-shadow.

Приклади

Картка на світлому тлі

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); додає картці чіткий контур і м’який ефект підняття.

Кільце фокусу без зміщення макета

Шар зі зміщенням 0, розмиттям 0 і розширенням 3px у кольорі бренду створює суцільне кільце навколо кнопки. На відміну від рамки, воно не змінює розмір елемента.

Натиснуте поле введення

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) створює ефект легкого заглиблення текстового поля.

Поширені запитання

Чим відрізняються box-shadow і filter: drop-shadow()?

box-shadow повторює межі елемента та його border-radius і підтримує розширення та inset. drop-shadow() повторює видиму форму, зокрема прозорі ділянки зображень PNG або SVG, але не підтримує розширення чи inset.

Чому тінь обрізається?

Якщо для батьківського елемента задано overflow: hidden, він обрізає все, що виходить за його межі, зокрема тіні. Додайте батьківському елементу внутрішні відступи або змініть правило overflow.

Скільки шарів використовувати?

Для більшості інтерфейсів достатньо одного-двох шарів. Більша кількість шарів може створити плавніший вигляд, але потребує трохи більше ресурсів для відображення, що важливо для довгих списків.

Конфіденційність

CSS генерується у вашому браузері. Дані не завантажуються на сервер і не зберігаються.