Как настроить CSS box-shadow с помощью генератора тени

Введите смещение, размытие, распространение и цвет, при необходимости включите inset, затем запустите расчёт. Инструмент сформирует декларацию CSS box-shadow с указанными значениями и единицами px.

Для чего нужен генератор тени CSS

Генератор CSS box-shadow помогает быстро собрать декларацию тени для элемента, когда не хочется вручную подбирать порядок значений и проверять, куда добавить inset. Он подходит для обычной внешней тени и для внутреннего эффекта, а результат можно перенести в правило CSS.

Настройка строится вокруг пяти параметров: горизонтального и вертикального смещения, размытия, распространения, цвета и переключателя внутренней тени. Числовые поля задают положение и размер эффекта, цвет определяет его видимость, а inset меняет способ отображения тени внутри элемента. Если параметры не менять, используются значения 2, 2, 5, 0, цвет #00000033, а внутренняя тень выключена.

Как настроить и получить декларацию

1. Откройте генератор и найдите поля для горизонтального смещения, вертикального смещения, размытия и распространения. Введите нужные числовые значения. Например, положительное горизонтальное смещение сдвигает видимый эффект вправо, а положительное вертикальное значение обычно используют для смещения вниз. Для симметричной тени можно оставить оба смещения равными нулю.

2. Укажите цвет в текстовом поле цвета. Если нужен полупрозрачный оттенок, задайте его в подходящей записи, например #00000033, как в исходном наборе значений. Не меняйте формат без необходимости: инструмент подставляет введённый цвет в декларацию.

3. Для внутреннего эффекта включите переключатель inset. Если нужна обычная внешняя тень, оставьте его выключенным. Включённая настройка добавляет inset в создаваемую декларацию.

4. Запустите расчёт кнопкой действия инструмента и просмотрите созданный CSS. Числовые значения тени получают суффикс px: горизонтальное смещение, вертикальное смещение, размытие и распространение. Скопируйте декларацию в правило нужного элемента, например в блок .card, и проверьте результат в своей странице.

5. Если эффект выглядит слишком тяжёлым, уменьшите размытие или распространение; если тень заметно уходит в одну сторону, пересмотрите оба смещения. Для внутреннего эффекта сначала проверьте переключатель inset, затем цвет и значения размытия. Отдельно сохраните выбранные параметры, чтобы при повторной настройке не подбирать их заново.

Как читать результат и что проверить

В результате ожидается декларация box-shadow, собранная из введённых значений. Четыре числовых параметра выводятся в порядке горизонтального смещения, вертикального смещения, размытия и распространения, после каждого значения добавляется px. Затем указывается цвет; при включённом переключателе перед числовыми значениями появляется inset. Поэтому при проверке результата сопоставьте его с формой введённых данных, а не только с тем, как тень выглядит визуально.

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

Рабочий пример. Для карточки с внутренней затемняющей тенью введите горизонтальное смещение 8, вертикальное 4, размытие 12, распространение 0, цвет #00000055 и включите inset. Результат должен иметь форму box-shadow: inset 8px 4px 12px 0px #00000055;. Такой вид показывает, что значения получили единицы px, цвет перенесён в декларацию, а внутренняя тень отмечена словом inset.

Генератор отвечает за формирование CSS-декларации из заданных настроек. Допустимые диапазоны чисел, правила округления и дополнительные ограничения формата в описании инструмента не определены, поэтому перед публикацией проверьте декларацию в собственном CSS и убедитесь, что цвет и значения соответствуют задумке.

Практический пример

Вы оформляете карточку с внутренней затемняющей тенью и хотите проверить порядок параметров в CSS-декларации.

Для карточки задайте горизонтальное смещение 8, вертикальное 4, размытие 12, распространение 0, цвет #00000055, включите inset и запустите расчёт.

Декларация имеет форму box-shadow: inset 8px 4px 12px 0px #00000055;, где числовые значения получили px, а внутренний режим отмечен inset.

Ограничения

• Инструмент формирует декларацию box-shadow из выбранных параметров. Допустимые диапазоны чисел, округление и дополнительные ограничения записи в доступном описании не указаны, поэтому готовый CSS стоит проверить в своём проекте.

Частые ошибки

• Если внутренняя тень не появляется, причина может быть в выключенном переключателе inset. Включите его и снова запустите расчёт: в декларации должно появиться inset.

Частые вопросы

Можно ли задать нулевые значения для параметров тени?

Да, если нужны нулевые смещения, размытие или распространение: проверенный расчёт принимает ноль для этих четырёх числовых значений и сообщает об успешном результате.

Как сделать тень внутренней?

Переключите inset перед расчётом. При включённой настройке созданная декларация содержит inset, а при выключенной этот маркер не добавляется.

Какие параметры можно изменить у CSS-тени?

Укажите горизонтальное и вертикальное смещение, размытие, распространение и цвет. Четыре числовых значения инструмент выводит с суффиксом px, после чего добавляет цвет; при включённом inset он также добавляет этот маркер.