Генератор box-shadow
Создавайте многослойные CSS-тени с живым превью.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Тени с настоящей глубиной, без угадывания
Настраивать тень вручную, значит перезагружать страницу десять раз. Здесь вы двигаете ползунки, и превью реагирует вживую. Складывайте несколько слоёв для реалистичной глубины и копируйте точный CSS.
-
Настройте слой
Смещение X/Y, размытие, растяжение, цвет и непрозрачность.
-
Добавьте слои
Смешайте резкую и рассеянную тень для естественности.
-
Скопируйте CSS
Полное свойство box-shadow, готовое к вставке.
Понимание синтаксиса
| Значение | Роль |
|---|---|
| offset-x | Горизонтальное смещение (вправо при +) |
| offset-y | Вертикальное смещение (вниз при +) |
| blur | Радиус размытия (больше = мягче) |
| spread | Увеличивает (+) или уменьшает (−) тень |
| color | Цвет, часто rgba() для непрозрачности |
| inset | Помещает тень внутрь блока |
Всё генерируется в браузере. Пример по умолчанию: box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Частые вопросы
Что означают значения box-shadow?
По порядку: горизонтальное смещение, вертикальное смещение, радиус размытия, радиус растяжения, затем цвет. Пример: «0 10px 25px -5px rgba(124, 58, 237, 0.35)» смещает тень на 10px вниз, размывает на 25px и сжимает на 5px.
Зачем нужен радиус растяжения (spread)?
Он увеличивает (положительное значение) или уменьшает (отрицательное) тень до размытия. Отрицательный spread отлично подходит для мягких поджатых теней, как карточка, слегка парящая над страницей.
Как наложить несколько теней?
Разделяйте слои запятой. Указанный первым рисуется сверху. Сочетание плотной резкой тени с широкой рассеянной выглядит гораздо естественнее одной тени.
В чём разница между box-shadow и drop-shadow?
box-shadow повторяет прямоугольник блока (и его border-radius). filter: drop-shadow() повторяет реальную форму с учётом прозрачности, идеально для вырезанных PNG и SVG. Для карточки или кнопки правильный выбор, box-shadow.