Тень отделяет карточку от фона и задаёт глубину интерфейса. В CSS за неё отвечает box-shadow: смещение по X и Y, размытие, растяжение и цвет. Неудачные значения делают блок грязным или «плавающим», поэтому удобнее подбирать тень визуально.
Генератор показывает результат на демонстрационной карточке и выдаёт готовый код. Есть пресеты для мягкой карточки, всплывающего окна, неоновой кнопки и внутренней тени.
Как работает
Первые два значения задают смещение тени, третье — размытие, четвёртое — растяжение. Цвет задаётся в HEX и переводится в rgba() с выбранной прозрачностью. Флаг inset делает тень внутренней.
Для многослойной тени можно добавить вторую строку вручную: браузеры поддерживают список через запятую. Начинайте с мягких теней с большим размытием и низкой прозрачностью — они выглядят естественнее.
Частые вопросы
Чем blur отличается от spread?
Blur размывает края тени, а spread увеличивает или уменьшает её размер до размытия. Отрицательный spread делает тень компактнее.
Почему тень обрезается?
У родительского элемента может быть overflow: hidden. Также тень не выходит за пределы области отрисовки, если у элемента задана маска или clip-path.
Как сделать тень только снизу?
Задайте положительное смещение по Y, небольшое размытие и отрицательный spread, чтобы убрать тень по бокам. Например: 0 8px 20px -8px rgba(15,23,42,.25).
Влияет ли тень на производительность?
Большие размытые тени при анимации могут нагружать отрисовку. Для анимаций используйте transform и opacity, а тень старайтесь не менять каждый кадр.