Генератор CSS box shadow

Перетаскивайте ползунки, чтобы настроить тень — смещение, размытие, растяжение, цвет и inset — добавляйте столько слоёв, сколько нужно, и копируйте CSS. Всё обновляется в реальном времени в вашем браузере.

Предпросмотр

Цвет блока

Цвет страницы

Слои тени

Сгенерированный CSS

Всё работает в вашем браузере. Ничего не загружается.

Как это работает

STEP 1

Настройте тень

Перетащите ползунки смещения, размытия и растяжения, выберите цвет и прозрачность, включите Inset для внутренней тени. Блок обновляется по мере изменений.

STEP 2

Добавьте слои

Добавляйте слои для создания мягкой, многослойной глубины — каждый слой имеет свои настройки и объединяется в одно правило.

STEP 3

Скопируйте CSS

Скопируйте готовое объявление box-shadow одним кликом и вставьте в свою таблицу стилей — ничего не загружается.