Генератор CSS box-shadow
Визуально создавайте CSS-свойство box-shadow с помощью ползунков. Просматривайте результат в реальном времени и копируйте готовый CSS-код. Поддерживаются множественные тени и внутренние тени.
Студия · нейтральное окружение
Возможности
Slider controls
Color picker
Inset toggle
Multiple layers
Live preview & CSS code
Как использовать
1. Формируйте тень ползунками — нейтральная карточка на рабочей области показывает ровно то, что получится.
2. Настоящие тени многослойны: добавляйте до четырёх слоёв или начните с пресета (Soft, Elevated, Floating, Inner).
3. Переключайте фон, чтобы проверить тень на белом, сером и тёмном, затем скопируйте CSS.
Часто задаваемые вопросы
What is box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame.
Похожие инструменты
Генератор CSS-градиентов
Создавайте линейные, радиальные и конические CSS-градиенты визуально. Добавляйте...
Генератор CSS border-radius
Визуально настройте CSS border-radius — управляйте всеми четырьмя углами по отде...
CSS Flexbox-песочница
Изучайте и экспериментируйте с CSS Flexbox. Настраивайте свойства контейнера и н...
Генератор CSS Grid
Визуально создавайте CSS Grid-макеты. Задайте строки, столбцы, отступы и скопиру...