Генератор CSS box-shadow
Визуально создавайте CSS-свойство box-shadow с помощью ползунков. Просматривайте результат в реальном времени и копируйте готовый CSS-код. Поддерживаются множественные тени и внутренние тени.
Возможности
Как использовать
1. Формируйте тень ползунками — нейтральная карточка на рабочей области показывает ровно то, что получится.
2. Настоящие тени многослойны: добавляйте до четырёх слоёв или начните с пресета (Мягкая, Приподнятая, Парящая, Внутренняя).
3. Переключайте фон, чтобы проверить тень на белом, сером и тёмном, затем скопируйте CSS.
Об этом инструменте
Убедительные тени в интерфейсах обычно состоят из нескольких слоёв: плотной и более тёмной тени для контакта и широкой мягкой — для расстояния. Этот генератор позволяет наложить до четырёх слоёв box-shadow, настраивая для каждого смещение по горизонтали и вертикали, размытие, растяжение, цвет, непрозрачность и внутренний режим, а нейтральная карточка на сцене показывает точный результат. Пресеты дают отправную точку — «Мягкая», «Приподнятая», «Парящая» и «Внутренняя», — а сцену можно переключать между белой, серой и тёмной поверхностью, чтобы проверить, что тень хорошо читается везде. Сгенерированный CSS перечисляет слои в правильном порядке с цветами rgba — его можно сразу вставить в таблицу стилей или файл дизайн-токенов.