Генератор box-shadow

Что это за инструмент?

box-shadow — это свойство CSS, которое рисует тень за элементом (или внутри него). При ручном написании требуется до пяти значений в определённом порядке — горизонтальное смещение, вертикальное смещение, радиус размытия, радиус растяжения и цвет — плюс необязательное ключевое слово inset. Всё это легко перепутать местами или сделать тень слишком слабой или слишком тяжёлой с первой попытки.

Этот инструмент превращает настройку в прямое манипулирование: двигаете ползунок, видите, как меняется тень в окне предпросмотра в реальном времени, и копируете точный CSS, когда результат устроит. Выбор цвета вместе с ползунком непрозрачности автоматически формирует корректное значение rgba(), ведь полупрозрачные тени обычно смотрятся реалистичнее полностью непрозрачных.

Зачем его использовать?

• Предпросмотр обновляется мгновенно при любой настройке — вы видите точную тень до того, как зафиксируете код.
• Полный контроль над смещением по X и Y, размытием, растяжением, цветом и непрозрачностью в одном месте.
• Один клик добавляет inset для эффекта вдавленности вместо парящей отбрасываемой тени.
• Выдаёт готовый к вставке CSS, где цвет уже переведён в rgba() с выбранной непрозрачностью.
• Работает полностью в вашем браузере — ничего из настроенного никуда не загружается.
• Бесплатно, без регистрации, работает на мобильных.

Как использовать

1. Настройте смещение X и Y, чтобы расположить тень — положительные значения сдвигают её вправо/вниз, отрицательные — влево/вверх.
2. Увеличьте радиус размытия, чтобы смягчить край тени; увеличьте растяжение, чтобы тень стала больше самого элемента.
3. Выберите цвет и настройте непрозрачность — большинство реалистичных теней используют 15–40% непрозрачности вместо сплошного чёрного.
4. Отметьте «внутренняя тень (inset)», если хотите, чтобы тень появлялась внутри границы элемента, а не позади него.
5. Скопируйте сгенерированный CSS и вставьте его в свою таблицу стилей.

Пример

Ввод

Смещение: 0px, 10px · Размытие: 20px · Растяжение: 0px · Цвет: чёрный при 35% непрозрачности

Результат

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Мягкая тень прямо под элементом без горизонтального смещения — один из самых распространённых стилей тени для карточек и кнопок.

Одна тень или несколько слоёв

Этот инструмент создаёт один слой тени, что покрывает подавляющее большинство реальных сценариев — кнопки, карточки, модальные окна и выпадающие списки почти всегда используют одну тень. CSS также поддерживает несколько теней через запятую на одном элементе для более сложных эффектов глубины (например, узкая тёмная тень под мягкой широкой), но это уже доработка, которую можно добавить вручную: сгенерируйте одну тень здесь, продублируйте строку, настройте второй набор значений и объедините их запятой.

Распространённые шаблоны box-shadow

• Лёгкий подъём карточки: небольшое смещение (0–4px), умеренное размытие (8–16px), чёрный при 10–20% непрозрачности.
• Приподнятое модальное окно/меню: большее смещение (4–10px) и размытие (20–30px), непрозрачность 20–35% для более выраженного ощущения парения.
• Нажатая/вдавленная кнопка: включите inset, используйте небольшое смещение и умеренное размытие, чтобы тень читалась как вмятина, а не подъём.
• Цветное свечение: выберите фирменный цвет вместо чёрного, поднимите непрозрачность до 40–60% и немного увеличьте растяжение для мягкого эффекта свечения вокруг кнопок.
• Резкая/жёсткая тень: установите размытие и растяжение в 0 для плотного смещённого силуэта вместо мягкой тени.

Сочетание со скруглёнными углами

Тени и скруглённые углы почти всегда используются вместе — карточки, кнопки и модальные окна практически всегда сочетают и то, и другое. Используйте Генератор border-radius, чтобы скруглить углы того же элемента, а затем примените оба сгенерированных объявления CSS вместе.

→ Генератор border-radius · Конвертер единиц измерения

Часто задаваемые вопросы