box-shadow

Интерактивный пример

box-shadow: 10px 5px 5px red;

box-shadow: 60px -16px teal;

box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2);

box-shadow: inset 5em 1em gold;

box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <p>This is a box with a box-shadow around it.</p>
  </div>
</section>

#example-element {
  margin: 20px auto;
  padding: 0;
  border: 2px solid #333;
  width: 80%;
  text-align: center;
}

Свойство box-shadow включает отбрасывание тени от границ практически любого элемента. Если для элемента с тенью задан border-radius, то отбрасываемая тень также будет с закруглёнными углами. Порядок наложения нескольких теней такой же, что и у текстовых теней: первая указанная тень будет поверх остальных.

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

Синтаксис

/* Ключевые слова */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Любое количество теней через запятую */
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

/* Глобальные значения */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;

Каждая тень определяется следующим образом:

• Два, три или четыре значения длины (<length>).

  • Если указаны только два значения, они будут означать смещение по X (<offset-x>) и смещение по Y (<offset-y>).
  • Третье значение устанавливает радиус размытия (<blur-radius>).
  • Четвёртое значение задаёт радиус распространения (<spread-radius>).

• Необязательное ключевое слово inset.

• Необязательное значение цвета (<color>).

Для одновременного создания нескольких теней используйте список значений, разделённых запятыми.

Значения

inset

Если не указано (по умолчанию), то тень будет отбрасываться от элемента (придавая эффект выпуклости блоку). Наличие ключевого слова inset отбрасывает тень внутри элемента (создавая эффект вдавленности блока). Внутренние тени начинаются с рамок элемента (даже если они прозрачные), над фоном элемента, но не под его содержимым.

<offset-x> <offset-y>

Есть два значения <length>, отвечающие за смещения тени. Значение <offset-x> задаёт положение тени по горизонтали. Отрицательные значения размещают тень слева от элемента. Значение <offset-y> определяет положение тени по вертикали. Отрицательные значения располагают тень выше элемента. См. <length>, чтобы узнать список допустимых единиц. Если смещение по обоим осям равно 0, то тень будет отбрасываться за элементом (в таком случае при наличии значений <blur-radius> и/или <spread-radius> будет эффект размытия).

<blur-radius>

Это третье значение <length>. Чем больше это значение, тем шире и светлее будет тень. Отрицательные значения не допускаются. Если не указано (по умолчанию), используется 0 (край тени будет резким). Спецификация не определяет в точности алгоритм вычисления радиуса размытия, однако описывает его так:

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

<spread-radius>

Это четвёртое значение <length>. Положительные значения расширяют тень, отрицательные — сжимают её. Если не указано (по умолчанию)) используется 0 (тень будет такого же размера, что и сам элемент).

<color>

Смотрите страницу по <color> для получения допустимых значений. Если не указано (по умолчанию), используется