Генератор CSS Box Shadow

Создавайте многослойные значения CSS box-shadow с живым превью, inset-переключателем и точными настройками.

Слои1
Создавайте многослойные значения CSS box-shadow с живым превью, inset-переключателем и точными настройками.
Настройки слоя
Слой 1
px
px
px
px
Предпросмотр
Скопируйте значение box-shadow в ваш CSS.
box-shadow
Вывод CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

Что такое box-shadow?

Создавайте многослойные значения CSS box-shadow с живым превью, inset-переключателем и точными настройками.

box-shadow — это свойство CSS, которое рисует одну или несколько теней позади (или внутри) элемента.

Каждая тень задаётся горизонтальным и вертикальным смещением, радиусом размытия, необязательным расширением и цветом с альфа-каналом; добавьте inset, чтобы получить внутреннюю тень.

Несколько слоёв разделяются запятыми, что позволяет наслаивать тени для глубины, свечения или чётких краёв.

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