Генератор теней CSS box-shadow
Двигайте ползунки смещения, размытия, растяжения и непрозрачности, добавляйте до четырёх слоёв и смотрите, как меняется тень на образце. Готовое правило копируется одной кнопкой.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Задайте смещение по горизонтали и вертикали. Положительные значения сдвигают тень вправо и вниз.
- Настройте размытие, растяжение, цвет и непрозрачность.
- Отметьте Inset для внутренней тени или нажмите Добавить слой, чтобы наложить ещё одну.
- Нажмите Копировать и вставьте правило в таблицу стилей.
Что означает код
По умолчанию получается box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);: без смещения по горизонтали, на 4px вниз, размытие 12px, без растяжения, чёрный с непрозрачностью 25 %. Альфа в CSS пишется через точку — 0.25. Несколько слоёв разделяются запятыми, нулевые значения записываются без единиц.
Пример
Карточка с близкой тенью и широкой мягкой: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 8px 24px 0 rgba(0, 0, 0, 0.15) — первый слой с непрозрачностью 20 %, второй — 15 %.
Советы
- Для естественного вида держите непрозрачность низкой, обычно 10–30 %.
- Тень не влияет на раскладку, но её может обрезать родитель с
overflow: hidden.
- Отрицательное растяжение вместе с большим размытием даёт тень только с одной стороны.
Частые вопросы
Что делают размытие и растяжение?
Размытие (blur) смягчает край: при 0 край резкий, а чем больше значение, тем шире полоса затухания. Растяжение (spread) при положительном значении увеличивает форму тени во все стороны до размытия, при отрицательном — уменьшает.
Как работают несколько слоёв?
Браузер рисует слои в порядке записи, первый — сверху. Сочетание маленькой плотной тени с большой мягкой обычно выглядит естественнее одной крупной. Инструмент позволяет до четырёх слоёв.
Что делает inset?
Тень рисуется внутри рамки элемента, а не снаружи, будто поверхность вдавлена. Внутренние и обычные слои можно смешивать в одном правиле.
Почему цвет записан как rgba()?
Ползунок непрозрачности становится альфа-каналом, чтобы тень просвечивала. При непрозрачности 100 % инструмент пишет обычный HEX-код.