Об этом инструменте
Свойство box-shadow глубже, чем кажется: смещение, размытие, растяжение, цвет и ключевое слово inset взаимодействуют, а настоящая глубина обычно достигается наложением нескольких теней. Этот генератор даёт ползунок для каждого значения и позволяет добавлять несколько слоёв, так что вы создадите что угодно — от лёгкого приподнимания карточки до смелого неоморфного эффекта.
Всё обновляется в живом превью, а готовый CSS box-shadow — в одном копировании. Работает целиком в браузере.
Частые вопросы
Поддерживает ли он несколько наложенных теней?
Да. Нажмите 'Add Layer', чтобы добавить ещё одну тень — все слои объединяются в одно значение box-shadow через запятую, при этом первый слой отображается поверх остальных.
Что делает флажок 'inset'?
Он переключает этот слой с внешней падающей тени на внутреннюю, которая появляется внутри границы элемента — удобно для эффекта вдавленности.
Как обрабатывается прозрачность тени?
Ползунок непрозрачности объединяется с выбором цвета в 8-значный hex-цвет (#rrggbbaa), что даёт настоящую альфа-прозрачность, поскольку сам по себе выбор цвета не хранит альфа-канал.
Загружаются ли куда-то данные моего дизайна?
Нет, предпросмотр тени и вывод CSS полностью генерируются в вашем браузере — ничего не загружается и не хранится на сервере.
Что делает отрицательное значение растяжения (spread)?
Отрицательный spread уменьшает форму тени перед размытием, что часто используют, чтобы тень выглядела тоньше или плотнее самого элемента.