Генератор 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.