На главную

CSS-эффекты и графика

Тени и поверхности

Пять генераторов в одном: многослойная тень блока, неоморфизм, матовое стекло, фильтр подложки и градиентная тень.

box-shadow из любого числа слоёв: реальные тени в макетах почти всегда составные.

Готовые тени

Мягкая тень одним движением

Собирает лесенку слоёв: смещение и размытие растут квадратично, прозрачность падает. Один слой с большим размытием выглядит как серое пятно — несколько слоёв дают естественную тень.

Слой 1

0px 10px 25px -5px rgba(0, 0, 0, 0.3)

Первый слой рисуется поверх остальных.

CSS

box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.3);