Генератор теней коробки

Создавайте многослойные тени блоков со смещением, размытием, распространением и цветом. Предварительный просмотр на карточке, а затем копирование CSS в один клик.

Box Shadow Generator

Live

Offset X8px

Offset Y16px

Blur32px

Spread-4px

Opacity35%

Card radius24px

Shadow color

Inset

Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

Создавайте многослойные тени блоков со смещением, размытием, распространением и цветом — включен предварительный просмотр в реальном времени.
Запускается в вашем браузере
Бесплатное использование

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

Отрегулируйте смещение, размытие и распространение.
Выберите цвет и непрозрачность (или добавьте слои).
Скопируйте CSS-код box-shadow.

How this tool works

Отрегулируйте смещение, размытие и распространение.
Выберите цвет и непрозрачность (или добавьте слои).
Скопируйте CSS-код box-shadow.

Recommended settings

Сначала используйте параметры по умолчанию, затем при необходимости измените их.

Supported formats

Text / on-page input

File size and limits

Очень сложные многослойные предварительные просмотры могут работать медленнее на старых телефонах.

Privacy

Генераторы цвета и CSS полностью работают в вашем браузере. Предварительный просмотр и преобразование никогда не загружают ваши стили.

Common use cases

Используйте Box Shadow Generator, когда вам нужно: создавайте многослойные тени блоков со смещением, размытием, распространением и цветом — включая предварительный просмотр в реальном времени.

Troubleshooting

Предварительный просмотр выглядит по-другому после вставки

Проверьте наличие конкурирующих CSS на вашей странице (сбросы, унаследованные цвета). Сначала скопируйте сгенерированное правило в изолированную таблицу стилей.

FAQ

Это загружает мой CSS?

Нет. Генераторы и преобразователи запускаются в вашем браузере с предварительным просмотром в реальном времени.

Нужен ли мне аккаунт?

Нет. Откройте инструмент, настройте элементы управления и скопируйте CSS.