Генератор box-shadow — CSS-тень онлайн
Подбор CSS box-shadow для карточек, кнопок и других элементов интерфейса
Работает в браузере · файлы никуда не загружаются
Положительные смещения сдвигают тень вправо и вниз. Отрицательное растяжение уменьшает тень.
CSS тени создан.
Как пользоваться
- Задайте смещения по горизонтали и вертикали, чтобы расположить тень.
- Настройте размытие и растяжение, чтобы управлять мягкостью и размером.
- Выберите цвет и непрозрачность. Включите inset, чтобы тень была внутри элемента.
- Посмотрите живой предпросмотр и скопируйте объявление
box-shadow.
Что означают значения
Положительное смещение по горизонтали сдвигает тень вправо, отрицательное — влево. Положительное смещение по вертикали сдвигает вниз, отрицательное — вверх. Размытие должно быть не меньше нуля; чем оно больше, тем мягче граница. Положительное растяжение увеличивает форму тени, отрицательное — уменьшает.
Цвет выводится каналами RGB с альфа-значением. Например, непрозрачность 25 % превращается в rgba(0, 0, 0, 0.25). При включённом inset слово inset ставится в начало значения тени.
Пример
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); создаёт мягкую чёрную тень, смещённую на восемь пикселей вниз. Нулевое горизонтальное смещение сохраняет симметрию слева и справа.
Чтобы тень выглядела плотнее, сравните отрицательное растяжение с меньшим размытием: они влияют на разные части эффекта. Внутренние тени проверяйте на итоговом размере компонента — от площади внутри зависит, сколько тени видно.
Ограничения и применение
Смещения и растяжение — от -100 до 100 пикселей, размытие — от 0 до 200 пикселей, непрозрачность — от 0 до 100 %.
Предпросмотр использует блок фиксированного размера. Размеры, скругление углов, фон вашего элемента и правила overflow у родителей могут изменить вид тени. Тень не занимает места в раскладке, поэтому оставьте вокруг компонента достаточно пространства, если эффект выходит за его границы.
Частые вопросы
Чем размытие отличается от растяжения?
Размытие (blur) смягчает края тени. Растяжение (spread) увеличивает или уменьшает её форму до размытия. Отрицательное растяжение делает тень меньше.
Что делает inset?
inset рисует тень внутри блока, а не снаружи. Это помогает создать эффект утопленного поля или нажатой кнопки.
Почему тень на моей странице обрезается?
Тень могут обрезать настройки overflow у родительского элемента или нехватка места. В предпросмотре очень большие тени, выходящие за рамку, тоже обрезаются.
Можно ли сделать несколько теней сразу?
Генератор создаёт одну тень. Для многослойного эффекта добавьте значения через запятую в скопированный CSS.
