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

Что такое Генератор CSS box-shadow?

Генератор CSS box-shadow — это бесплатный визуальный редактор CSS-свойства box-shadow, созданный для фронтенд-разработчиков и дизайнеров. Добавьте один или несколько слоёв тени и настройте для каждого offset-x, offset-y, радиус размытия, радиус растяжения, цвет и флаг inset с помощью простых числовых полей и палитры выбора цвета. Окно предпросмотра на шахматном фоне в реальном времени показывает совмещённый результат, а полное объявление box-shadow — с разделением каждого слоя запятыми — формируется для копирования. Используйте его, чтобы создавать мягкие тени высоты, чёткий неоморфизм, эффекты свечения или многослойную глубину в стиле Material, не запоминая порядок значений.

Как пользоваться Генератор CSS box-shadow

1. Задайте для первого слоя offset-x и offset-y (в px), чтобы сместить тень по горизонтали и вертикали; отрицательные значения смещают её влево или вверх.
2. Настройте радиус размытия (насколько мягкая тень) и радиус растяжения (насколько она увеличивается или уменьшается).
3. Выберите цвет образцом или введите шестнадцатеричное значение — 8-значный hex, например #00000040, задаёт прозрачность тени.
4. Установите флажок inset, чтобы рисовать тень внутри элемента, а не снаружи.
5. Нажмите «Добавить слой», чтобы наложить ещё одну тень сверху, затем меняйте порядок, редактируя значения; удалить любой слой можно кнопкой корзины.
6. Следите за обновлением предпросмотра, затем скопируйте сгенерированный CSS box-shadow в свою таблицу стилей.

Примеры

x 0, y 4, размытие 12, растяжение 0, цвет #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Слой 1: 0 1 2 0 #0000001a · Слой 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset включён, x 0, y 2, размытие 6, растяжение 0, цвет #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

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

Каков порядок значений box-shadow?

Каждый слой записывается как offset-x, offset-y, радиус размытия, радиус растяжения, цвет, с необязательным ключевым словом inset в начале. Этот инструмент всегда выводит все четыре длины в px (offset-x, offset-y, размытие, растяжение), поэтому порядок однозначен и его легко вручную подправить впоследствии.

Можно ли добавить полупрозрачную или цветную тень?

Да. Введите любой CSS-цвет в поле цвета — полный 8-значный hex, например #00000040 (последние две цифры — это альфа), даёт полупрозрачную тень, и вы можете использовать именованные цвета или любой hex. Образец палитры работает со сплошными цветами #rrggbb; для альфа-канала редактируйте текстовое поле.

Как наложить несколько теней?

Нажимайте «Добавить слой» для каждой дополнительной тени. Сгенерированный CSS разделяет каждый слой запятыми по порядку, сверху вниз — первый слой отрисовывается последним (поверх остальных). Используйте это для многослойной глубины в стиле Material или чтобы сочетать внешнее свечение с inset-подсветкой.

Что делает флажок inset?

Inset рисует тень внутри границы элемента, создавая вид вдавленности или внутреннего свечения вместо внешней отбрасываемой тени. Включайте его для каждого слоя; в одном значении box-shadow можно смешивать inset-тени и внешние тени.

Загружаются ли мои данные куда-либо?

Нет. Генератор работает полностью в вашем браузере на JavaScript — ваши цвета и значения никогда не отправляются на сервер, поэтому он работает приватно и даже офлайн после загрузки страницы.