РазработчикProcessado no seu navegador

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

Создавайте CSS-тени визуально с предпросмотром в реальном времени.

0 из 3 использований сегодня · осталось 3. Перейдите на Pro и снимите ограничение.

Слои

1/6

Экспорт

CSS3

Обработка

Локальная обработка

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

Объект

#1e1f20Фон

#131314

Цель

Результат CSS

box-shadow: 0px 30px 60px -15px #4f46e566;

Смещение по X0px

Смещение по Y30px

Размытие60px

Растяжение-15px

Прозрачность40%

§ Как использовать

Создавайте тени любой глубины — от едва заметных до выразительных — с живым предпросмотром и готовым кодом.

Задайте смещения
X (горизонтальное), Y (вертикальное), Blur (мягкость) и Spread (толщина). Двигайте ползунки и сразу видите результат.
Выберите цвет тени
По умолчанию — чёрный с низкой непрозрачностью (естественная тень). Для эффекта цветного «свечения» возьмите фирменный цвет бренда.
Добавьте несколько слоёв (по желанию)
Профессиональные тени строятся из 2–3 слоёв: близкая тень плюс рассеянная. Такое сочетание создаёт настоящую глубину.
Скопируйте CSS
Готово к вставке. Включает опциональный inset (внутренняя тень) и кросс-браузерные префиксы.

Связанные