CSS Box-Shadow

Складывайте слои. Настраивайте каждый. Копируйте готовый CSS.

PREVIEW

Что это за генератор CSS box-shadow?

Этот бесплатный генератор CSS box-shadow позволяет визуально стопковать любое количество слоёв тени, настраивать смещение, размытие, расширение, цвет и прозрачность для каждого слоя, а затем копировать production-уровень CSS — всё работает в браузере.

Как создать многослойный box-shadow в CSS?

Добавьте слой для каждой тени, задайте смещение, размытие, расширение и цвет, затем разделите их запятыми. Генератор управляет порядком и rgba-конвертацией, так что вы можете скопировать CSS, который сразу подходит для вашего стиль-файла.

Ключевые возможности

Неограниченные слои теней
Стопкуйте столько слоёв теней, сколько нужно; переупорядочивайте, дублируйте или удаляйте каждый независимо.
Inset и outset
Переключайте любой слой между drop shadow и inset для эффектов внутреннего свечения и нажатия.
Подобранные пресеты
Subtle, soft, medium, hard, neumorphism, glow и glassmorphism — один клик для загрузки, затем настройте по вкусу.
Копировать как CSS или Tailwind
Получите канонический box-shadow или Tailwind-класс с произвольным значением для прямого использования.

Как пользоваться

Начните с дефолтной мягкой тени, затем подкрутите ползунки смещения, размытия, расширения и цвета по вкусу. Добавьте больше слоёв для более насыщенной глубины — ambient + key shadow это классический двухслойный паттерн. Переключите фон сцены, чтобы проверить контраст на тёмных и светлых поверхностях. Нажмите Copy CSS, когда будете готовы.

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

Как сложить несколько box-shadow в CSS?

Разделите их запятыми внутри одной декларации box-shadow. Первая тень рисуется поверх остальных, что важно при смешивании плотной окружающей тени с более широкой диффузной.

В чём разница между blur и spread?

Blur смягчает края тени, тогда как spread расширяет или сжимает саму тень до размытия. Используйте blur для окружающей мягкости и spread для плотных rim-бликов.

Можно ли создать neumorphism или glassmorphism с этим?

Да. Пресет Neumorphism стопкует одну тёмную и одну светлую тень на противоположных сторонах; пресет Glass комбинирует внешнюю drop shadow с внутренним highlight для имитации матового стекла.

Создано командой Tooljar в соответствии со спецификацией W3C CSS Backgrounds and Borders Module Level 3 — каждый слой отрисовывается в той же сокращённой записи, которую парсит браузер, так что предпросмотр это точно то, что нарисует production CSS.