Свойство CSS `box-shadow`

Свойство box-shadow CSS добавляет эффекты тени вокруг рамки элемента. Можно задать несколько эффектов, разделив их запятыми. Тень блока описывается смещениями по осям X и Y относительно элемента, радиусами размытия и распространения, а также цветом.

Попробуйте

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

box-shadow: 60px -16px teal;

box-shadow: 12px 12px 2px 1px rgb(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 #333333;
  width: 80%;
  text-align: center;
}

Синтаксис

/* Keyword values */
box-shadow: none;

/* A color and two length values */
box-shadow: red 60px -16px;

/* Three length values and a color */
box-shadow: 10px 5px 5px black;

/* Four length values and a color */
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

/* inset, length values, and a color */
box-shadow: inset 5em 1em gold;

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

/* Global values */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;

Укажите одну тень блока, используя:

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

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

Значения

<color> Необязательное

Задаёт цвет тени. Допустимые ключевые слова и обозначения см. в разделе о значениях color. Если значение не указано, используется значение свойства color, заданное для родительского элемента.

<length>

Задаёт смещение тени. Этот параметр принимает два, три или четыре значения. Третье и четвёртое значения необязательны. Они интерпретируются следующим образом:

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

• Если указаны три значения, третье интерпретируется как <blur-radius>. Чем больше это значение, тем сильнее размытие, поэтому тень становится больше и светлее. Отрицательные значения недопустимы. Если значение не указано, оно будет равно 0 (то есть край тени будет чётким). В спецификации не указан точный алгоритм расчёта радиуса размытия, однако приводится следующее пояснение:

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

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

inset Необязательное

Изменяет внешнюю тень блока на внутреннюю (как если бы содержимое было вдавлено в блок). Внутренние тени обрезаются по области внутренних отступов элемента и отображаются поверх фона, но под содержимым. По умолчанию тень ведёт себя как падающая тень, создавая впечатление, что блок приподнят над содержимым. Это поведение используется по умолчанию, если inset не задано.

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

При анимации теней, например когда при наведении указателя на блок несколько значений тени сменяются новыми, значения интерполируются. Интерполяция определяет промежуточные значения свойств, таких как радиус размытия, радиус распространения и цвет, во время смены теней. Для каждой тени в списке интерполируются цвет, координаты x и y, размытие и распространение: цвет — как color, а остальные значения — как <length>.

При интерполяции нескольких теней между двумя списками теней блока, разделёнными запятыми, тени сопоставляются по порядку, и интерполяция выполняется между соответствующими парами. Если списки теней имеют разную длину, более короткий список дополняется в конце тенями, у которых цвет равен transparent, а значения X, Y и размытия равны 0; при этом значение inset или его отсутствие устанавливается соответствующим образом. Если в какой-либо паре теней у одной задано inset, а у другой — нет, весь список теней не интерполируется: тени сменятся новыми значениями без эффекта анимации.

Описание

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

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

Формальное определение

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

box-shadow = 
  none |
  <shadow>#

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

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> = 
  lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<lch()> = 
  lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Примеры

Задание трёх теней

В этом примере мы задаём три тени: внутреннюю, обычную падающую и тень размером 2 пикселя, создающую эффект границы (для третьей тени вместо этого можно было бы использовать outline).

HTML

<blockquote>
  <q>
    You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.
  </q>
  <p>&mdash; Maya Angelou</p>
</blockquote>

CSS

blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgb(0 200 0 / 30%),
    0 0 0 2px white,
    0.3em 0.3em 1em rgb(200 0 0 / 60%);
}

Результат

Нулевые значения смещения и размытия

Если значения x-offset, y-offset и blur равны нулю, тень блока будет представлять собой сплошную цветную рамку одинакового размера со всех сторон. Тени рисуются от заднего плана к переднему, поэтому первая тень располагается поверх последующих. Если значение border-radius равно 0 (это значение используется по умолчанию), углы тени будут… углами. Если бы мы задали для border-radius любое другое значение, углы были бы скруглёнными.

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

HTML

<div><p>Hello World</p></div>

CSS

p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}

Результат

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

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

См. также

• color
• text-shadow
• drop-shadow()
• Введение в тени текста
• Применение цвета к HTML-элементам с помощью CSS
• Модуль фонов и границ CSS