OmniKit.tech Logo OmniKit.tech
RU
box-shadow-generator

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

Визуальный генератор теней: многослойные тени, размытие, цвет, живое превью и экспорт в CSS и Tailwind.

Готовые пресеты

Слои тени

Смещение X 0px
Смещение Y 4px
Размытие (Blur) 6px
Размах (Spread) -1px
Цвет тени
#000000
Прозрачность 10%

Живой предпросмотр

Блок
Фон холста
Цвет блока
Радиус 16px
CSS Код
Tailwind CSS Класс

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

1 Настройте параметры слоя тени

Регулируйте смещение по осям X и Y, радиус размытия (Blur), размах (Spread), цвет и прозрачность тени с помощью удобных ползунков.

2 Добавляйте слои и применяйте пресеты

Создавайте реалистичные многослойные тени кнопкой "+ Добавить слой" или выберите готовый дизайнерский пресет: Soft, Float, Glow или Inner.

3 Скопируйте CSS код или класс Tailwind

Оцените результат на интерактивном холсте и скопируйте готовое свойство box-shadow для CSS или префиксный класс shadow-[...] для Tailwind CSS в один клик.

Часто задаваемые вопросы (FAQ)

В чём преимущество многослойных теней перед одиночными?
В реальном мире свет рассеивается неравномерно. Наложение двух и более мягких слоев с разным размытием и прозрачностью создает естественную глубину и объём, чего невозможно добиться одной резкой тенью.
Как подключить сгенерированную тень в Tailwind CSS?
Генератор автоматически формирует класс произвольного значения Tailwind, например: class="shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1)]". Просто вставьте его в атрибут class любого HTML-элемента.
Поддерживаются ли внутренние тени (inset)?
Да, для любого слоя можно активировать флажок Inset (внутренняя тень). Можно сочетать внешние и внутренние тени на одном элементе.

Похожие инструменты