Генератор CSS box-shadow

Слой тени

Тень:

Снаружи Внутри

Цвет:

Прозрачность:

Горизонтальный сдвиг:

Вертикальный сдвиг:

Размытие:

Расширение:

Добавить слой тени

Предварительный просмотр:

Сгенерированный код:

-moz-box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 1);
-webkit-box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 1);
box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 1);

Красивые и реалистичные тени делают интерфейс сайта объемным, современным и приятным для восприятия. Бесплатный онлайн генератор CSS box-shadow поможет вам визуально настроить любые эффекты теней для блоков без ручного написания кода. Больше не нужно подбирать пиксели вслепую — меняйте параметры и сразу смотрите на результат в реальном времени.

Возможности интерактивного конструктора теней:

• Гибкая настройка: меняйте смещение по осям X/Y, размытие (blur), растяжение (spread) и непрозрачность.
• Внутренние тени: переключайтесь на режим inset для создания эффекта вдавленных элементов.
• Готовый код: утилита мгновенно генерирует чистый, кроссбраузерный CSS-код, готовый к копированию.

Используйте инструмент, чтобы создавать как мягкие неоморфные эффекты, так и жесткие ретро-тени. Прокачайте дизайн ваших кнопок, карточек товаров и модальных окон за пару кликов!