Генератор CSS Box Shadow
The box-shadow property adds a shadow around an HTML element. Syntax: box-shadow: [inset] offset-x offset-y blur spread color;
Как настроить box-shadow без ручного подбора
Инструмент generatorsconverters.com строит CSS-свойство box-shadow из отдельных слоёв. Для каждого слоя можно задать смещение по X и Y, размытие, spread, цвет, прозрачность и режим inset. Результат сразу отображается на карточке предпросмотра, а готовая строка CSS собирается в поле вывода. Это удобно, когда нужно не вспоминать порядок параметров, а быстро увидеть, как тень будет выглядеть на кнопке, панели, модальном окне или изображении.
Смещение X двигает тень вправо или влево, Y — вниз или вверх. Blur отвечает за мягкость края: маленькие значения дают резкую графичную тень, большие создают рассеянный свет. Spread расширяет или сжимает область тени до размытия, поэтому отрицательное значение часто делает тень более естественной под карточкой. Цвет и opacity лучше подбирать вместе: чёрная тень с небольшой прозрачностью обычно выглядит спокойнее, чем насыщенный непрозрачный серый. Режим inset переносит тень внутрь элемента и подходит для полей ввода, нажатых кнопок и декоративных углублений.
Генератор поддерживает несколько слоёв. Такой подход позволяет имитировать Material Design, мягкие elevation-эффекты, неоновое свечение или цветную тень под промо-блоком. Предустановки Subtle, Medium, Large, Dramatic, Inset, Colored, Material и Neon дают стартовую точку, но после выбора пресета параметры можно изменять вручную. Поле background помогает проверить, как тень читается на светлом, сером или цветном фоне.
При переносе результата в проект учитывайте контекст. Для рабочих интерфейсов тень обычно должна помогать отделять уровни, а не отвлекать. На мобильных экранах слишком большое размытие может выглядеть грязно, а на тёмной теме чёрные тени почти исчезают. Копируйте итоговую строку box-shadow: ...;, затем проверьте её рядом с border, border-radius и hover-состоянием компонента.
Типичные ошибки при настройке тени
Частая ошибка — увеличивать blur и opacity одновременно. Такая тень быстро превращается в мутное пятно и визуально утяжеляет компонент. Лучше сначала выбрать направление света через X и Y, затем подобрать blur, после этого уменьшить прозрачность до спокойного значения. Для карточек обычно достаточно одной мягкой внешней тени; для всплывающих меню и модальных окон можно добавить второй широкий слой. Если элемент уже имеет яркую рамку или цветной фон, тень должна быть слабее, иначе интерфейс выглядит перегруженным.
Для дизайн-системы сохраните несколько проверенных уровней тени как переменные: small, medium, large и overlay. Так разные страницы будут использовать одинаковую визуальную глубину, а не случайные значения.
Слои тени и готовый CSS
Генератор box-shadow строит одну или несколько теней из параметров X, Y, blur, spread, color, opacity и inset. Каждый слой превращается в строку вида `xpx ypx blurpx spreadpx rgba(...)`, а несколько слоев соединяются запятыми. Preset-режимы subtle, medium, large, dramatic, inset, colored, material и neon задают стартовые комбинации, которые затем можно менять ползунками. Предпросмотр обновляется сразу, а поле CSS содержит полное правило `box-shadow: ...;`, готовое для вставки в stylesheet или компонент.
Комментарии