Генератор теней

Генерация CSS box-shadow с превью.

Настройте горизонтальное и вертикальное смещение, размытие, растяжение, цвет и режим inset, затем скопируйте корректное свойство box-shadow. Превью обновляется при правках.

Ограничения

Генерируется один слой тени. Несколько теней в одной декларации нужно собрать вручную в CSS.

Рекомендуемые инструменты

Частые вопросы

Инструмент задаёт горизонтальное и вертикальное смещение, размытие, растяжение, цвет и режим inset. На основе этих значений формируется готовое свойство box-shadow.

При включении inset тень рисуется внутри границ элемента и подходит для углублений или нажатых состояний. Без inset тень располагается снаружи и визуально отделяет элемент от фона.

Большое растяжение увеличивает сплошную область тени, а малое размытие делает край резким. Обычно результат корректируют сочетанием умеренного blur, прозрачного цвета и небольшого spread.

Да, генератор выдаёт синтаксически готовое CSS-свойство box-shadow. Внешний вид зависит от фона, размеров и скругления элемента, поэтому его следует проверить в реальном компоненте.