Box Shadow Generator

Синтаксис: box-shadow offset-x offset-y blur-radius spread color. offset-x и offset-y — смещение тени, blur-radius — размытие, spread — расширение/сжатие тени, color — цвет (можно с alpha). Необязательный параметр inset рисует тень внутрь элемента.

Перечислите тени через запятую: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2). Первая тень отображается поверх следующих. Комбинируйте близкую мягкую тень и дальнюю размытую для глубины.

box-shadow следует форме box-модели элемента (прямоугольник), drop-shadow повторяет форму контента, включая прозрачные области. drop-shadow подходит для PNG с прозрачностью, box-shadow — для карточек и кнопок с чёткими границами.

inset рисует тень внутри элемента, создавая эффект вдавленности или внутренней рамки. Полезно для кнопок в нажатом состоянии, полей ввода и карточек с «углублённым» контентом. Смещение при inset обычно делают положительным по Y.

Одна-две тени на элемент обычно не создают проблем. Множество теней на многих элементах (например, в длинных списках) может нагружать композитинг. Для анимаций предпочтительнее transform, а не анимация box-shadow — последняя вызывает перерисовку.