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

Бесплатный онлайн-генератор CSS-теней. Настройте смещение, размытие, распространение и цвет с помощью визуальных элементов управления, мгновенно генерируйте CSS-код.

CSS-свойство box-shadow — один из самых универсальных инструментов в арсенале веб-дизайнера, способный добавить глубину, иерархию и визуальный интерес элементам интерфейса. CSS Box Shadow Generator предоставляет визуальный интерфейс для создания CSS-кода box-shadow с полным контролем над каждым параметром и интерактивным предпросмотром, который обновляется в реальном времени.

Генератор открывает пять регулируемых параметров с помощью ползунков. X Offset смещает тень по горизонтали (положительные значения — вправо, отрицательные — влево). Y Offset смещает тень по вертикали (положительные значения — вниз, отрицательные — вверх). Blur Radius управляет мягкостью краёв тени — ноль даёт резкую отброшенную тень, а большие значения создают более мягкий, рассеянный эффект. Spread Radius расширяет или сжимает размер тени, не влияя на размытие. Пипетка задаёт цвет тени с управлением прозрачностью через альфа-канал.

Карточка живого предпросмотра мгновенно показывает эффект каждой корректировки. Карточка предпросмотра оформлена с белым фоном и скруглёнными углами, имитируя реальный компонент интерфейса, поэтому вы видите точно, как тень будет выглядеть на ваших элементах. Включены шесть предустановленных теней для быстрого выбора: тонкая, средняя, тяжёлая, размытая, внутренняя и приподнятая.

Сгенерированный CSS-код box-shadow отображается в готовом к копированию формате. Вывод поддерживает полный сокращённый синтаксис, включая ключевое слово inset для внутренних теней. Несколько значений box-shadow можно объединить, скопировав вывод и вставив несколько объявлений вручную. Инструмент также проверяет корректность синтаксиса, поэтому каждая копия является валидным CSS-объявлением.