CSS Бесплатно, без регистрации

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

Выберите слой тени, меняйте смещение, размытие и растяжение — превью обновляется сразу, а ниже появляется готовый CSS-код для box-shadow.

Результат

Готовый CSS-код

.box {
  border-radius: 16px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
}

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

Выберите готовый вариант (мягкая, жёсткая, многослойная, внутренняя, свечение) или начните с нуля.
Выберите слой и настройте смещение по x и y, размытие (blur) и растяжение (spread). Для внутренней тени включите inset.
Задайте цвет и непрозрачность — в коде они записываются как rgba(). Кнопка «+ Добавить слой» даёт до 5 слоёв.
Поменяйте цвет блока, border-radius и фон страницы, чтобы проверить эффект в реальных условиях, и нажмите «Копировать».

Как это работает

Синтаксис box-shadow

Каждая тень состоит из пяти частей: смещение по горизонтали, смещение по вертикали, радиус размытия (blur), растяжение (spread) и цвет. Если в начале добавить inset, тень рисуется внутри элемента. Размытие не бывает отрицательным, 0 даёт резкий край; растяжение может быть отрицательным и уменьшает тень. Тень не влияет на вёрстку и не занимает места.

box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);

Несколько теней и порядок слоёв

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

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.1),
  0 4px 8px rgba(0, 0, 0, 0.1),
  0 16px 32px rgba(0, 0, 0, 0.1);

inset, spread и эффект рамки

inset рисует тень внутри элемента — поверх фона, но под содержимым: так делают «вдавленные» кнопки и поля ввода. Если размытие равно 0, а растяжение положительное, тень превращается в ровное кольцо: 0 0 0 3px выглядит как цветная рамка и не сдвигает вёрстку.

box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 3px #2563eb;

box-shadow, drop-shadow и text-shadow

box-shadow всегда следует прямоугольному боксу элемента и его border-radius. Чтобы тень повторяла контур прозрачного PNG или SVG, используйте filter: drop-shadow() — у него нет растяжения и inset. Для текста есть text-shadow: три длины (x, y, blur) и цвет.

filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

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

Почему тень не видна?

Частые причины: у родителя стоит overflow: hidden и обрезает тень; цвет тени совпадает с фоном или слишком прозрачен. Кроме того, внешняя тень не рисуется внутри самого блока — у элемента с прозрачным фоном она видна только вокруг.

Как сделать тень только с одной стороны?

Сочетайте отрицательное растяжение со смещением: box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.5) даёт тень только снизу. Растяжение сжимает тень со всех сторон, а смещение выталкивает её в нужную.

Можно ли анимировать box-shadow?

Да, transition: box-shadow 0.2s работает. Но тень с сильным размытием перерисовывается на каждом кадре. Лёгкий вариант: вынести тень в псевдоэлемент ::after и анимировать только его opacity.

Достаточно ли box-shadow для индикатора фокуса?

Нет. В режиме высокой контрастности Windows (forced-colors) браузер убирает тени. Кольцо фокуса делайте через outline, а тень оставьте как дополнительное украшение.

Эта тема в курсе HTML и CSS

Тени: box-shadow и text-shadow

Другие CSS-инструменты