box-shadow

CSS-свойство box-shadow позволяет добавлять элементу одну или несколько теней, указывая их параметры через запятую. Свойство тени представляет собой описанные смещения по x и y от элемента, радиус размытия и его радиус, а также цвет.

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

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

Синтаксис

/* 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;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Глобальные ключевые слова */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

Чтобы задать одну тень, можно использовать:

  • Два, три и четыре значения <length>.
    • Если задано только два значения, они интерпретируется как <offset-x><offset-y> values.
    • Если задано третье значение, оно понимается как <blur-radius>.
    • Если задано чертвёртое значение, оно интерпретируется <spread-radius>.
  • Дополнительно, можно задать ключевое слово inset.
  • Дополнительно, можно задать значение <color>.

Чтобы задать несколько теней, перечислите их через запятую.

Значения

inset
Если ключевое слово inset не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).
При наличие ключевого слова inset, тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.
<offset-x> <offset-y>
Существуют 2 значения <length>, которые устанавливают смещение тени. <offset-x> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <offset-y> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы <length> можно задать.
Если оба значения равны 0, то тень расположится за элементом (и будет отображаться размытие, если <blur-radius> и/или <spread-radius> установлены).
<blur-radius>
Это третье значение <length>. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться 0 (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следущее:
…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
<spread-radius>
Это четвёртое значение <length>. Положительные значения увеличивают тень, отрицательные - сжимают. По умолчанию значение равно 0 (размер тени равен размеру элемента).
<color>
Смотрите возможные ключевые слова и нотации для <color>.
Если не указано, используемый цвет будет зависеть от браузера - обычно будет применено значение свойства color, но Safari в настоящее время рисует прозрачную тень в этом случае.

Интерполяция

Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not inset, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) matches the longer list.

Формальный синтаксис

none | <shadow>#

где
<shadow> = inset? && <length>{2,4} && <color>?

где
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Примеры

Спецификации

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'box-shadow' в этой спецификации.
Кандидат в рекомендации Изначальное определение
Начальное значениеnone
Применяется квсе элементы. Это также применяется к ::first-letter.
Наследуетсянет
Обработка значениялюбая абсолютная длина; работает любой указанный цвет; если другое не указано
Animation typeсписок теней

Совместимость с браузерами

BCD tables only load in the browser

Смотрите_также