Генератор box-shadow
Визуальный инструмент для создания и копирования CSS box-shadow.
Окружение
CSS-код
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
Слой 1
Рекомендуемые инструменты
Подборка полезных утилит
Визуальное создание CSS-теней box-shadow
Обзор
Генератор box-shadow позволяет собирать CSS-свойство box-shadow перетаскиванием ползунков вместо угадывания чисел. Тени придают глубину и иерархию кнопкам, карточкам и модалкам, но синтаксис — смещения, размытие, разрастание, цвет и inset — писать вручную неудобно. Инструмент показывает живой предпросмотр при изменении каждого значения и выдаёт точный CSS для копирования, всё в браузере.
Как пользоваться (по шагам)
- 1
Настройте ползунки
Задайте горизонтальное и вертикальное смещение, размытие, разрастание и цвет, следя за живым предпросмотром.
- 2
Сложите тени при необходимости
Добавьте несколько слоёв тени для глубины или включите inset для внутренней тени.
- 3
Скопируйте CSS
Возьмите сгенерированное значение box-shadow и вставьте в таблицу стилей или компонент.
Как это работает
Свойство box-shadow принимает горизонтальное и вертикальное смещения, радиус размытия, необязательное разрастание и цвет (обычно с прозрачностью). Вы двигаете ползунки, и предпросмотр обновляется мгновенно, так что видно, как ложится тень. Инструмент пишет соответствующее объявление box-shadow, включая несколько сложенных теней, если добавите, — готовое для вставки в таблицу стилей.
Когда пригодится
Добавить лёгкую тень, чтобы приподнять карточку или кнопку. Воспроизвести тень из макета без угадывания значений. Собрать реалистичную многослойную тень из нескольких. Создать inset-тень для нажатых или утопленных элементов UI. Тонко настроить мягкость и цвет тени для тёмной или светлой темы. Понять, как каждое значение box-shadow влияет на результат.
Частые вопросы
По порядку: горизонтальное смещение, вертикальное смещение, радиус размытия и разрастание. Смещения двигают тень, размытие смягчает край, разрастание увеличивает или уменьшает её. Далее идёт цвет, часто rgba() с низкой прозрачностью для мягкости.
Важные замечания
Тяжёлые или многочисленные box-shadow могут вредить производительности отрисовки, особенно при анимации. Держите тени лёгкими и ограничивайте сложенные слои на часто движущихся или обновляемых элементах.