Генератор теней box-shadow для CSS

Синтаксис box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: положительное значение, вправо, отрицательное, влево.
• y-offset: положительное значение, вниз, отрицательное, вверх.
• blur: 0, резкий край, чем больше значение, тем мягче. Видимый размер выходит за пределы элемента примерно на 1,5× значения размытия.
• spread: дополнительный размер за пределами элемента. Положительное значение увеличивает тень, отрицательное, уменьшает её (полезно для тонких ореолов).
• colour: поддерживает любой цвет CSS. rgba(0, 0, 0, 0.15), самый ходовой вариант.
• inset: ключевое слово, разворачивающее тень внутрь элемента.

Многослойные тени выглядят реалистично

Этот генератор выдаёт по одному правилу тени за раз; чтобы построить многослойную тень, создавайте каждый слой отдельно и объединяйте правила запятой.

Одна тень с параметрами 0 0 40px выглядит размытой. Две тени, маленькая чёткая рядом с элементом и более крупная мягкая подальше, имитируют то, как рассеивается настоящий свет.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

Первая строка даёт плотную контактную тень, вторая, более мягкую окружающую. Один этот приём покрывает 80% интерфейсов в стиле карточек.

Системы возвышения (elevation)

В Material Design используется шесть уровней возвышения, у каждого из которых свой набор теней. В упрощённом виде:

Выберите по одному варианту на каждую роль возвышения и используйте его последовательно.

Цветные тени выглядят естественнее

Чисто чёрные тени смотрятся искусственно, потому что настоящие тени окрашиваются поверхностью под ними. Попробуйте:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

Прохладный сине-серый цвет вместо чисто чёрного. На тёплых фонах используйте более тёплый оттенок.

Производительность

Тени box-shadow отрисовываются при каждой перерисовке. Крупные, тяжёлые тени на множестве элементов могут замедлять прокрутку. Способы смягчения:

• Примените transform: translateZ(0) к элементу, чтобы принудительно создать композитный слой.
• Заменяйте сложные тени на filter: drop-shadow() только если тень должна следовать за clip-path (в целом это медленнее).
• Ограничивайте тени на элементах, которые часто перерисовываются.

inset для нажатых состояний

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Тени inset имитируют углубление, кнопка выглядит вдавленной в поверхность. Сочетайте их с небольшим смещением вниз transform: translateY(1px), чтобы получить ощутимый отклик при нажатии.