Как пользоваться
- Выберите пресет или настройте смещение, размытие, распространение, цвет и непрозрачность первого слоя.
- Добавьте слои для более естественной глубины или включите «Внутренняя тень».
- Подберите фон предпросмотра и цвет блока под свой дизайн, затем скопируйте 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 создаётся в браузере. Данные не загружаются и не сохраняются.