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

Определение и применение

CSS свойство box-shadow добавляет одну или несколько теней к элементу. Для указания нескольких теней необходимо добавить дополнительное значение тени /-ей, разделенных запятыми.

Используя CSS свойство border-radius, вы можете получить тень с закругленными углами. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху), этот принцип используется и у свойства text-shadow.

CSS

box-shadow: inset 5px 10px 15px 5px khaki;

inset — внутренняя тень; без этого слова тень внешняя.
Первые два значения, 5px 10px, — смещение вправо и вниз.
15px — радиус размытия.
Следующие 5px — радиус распространения тени.
khaki — цвет тени.

При работе с CSS свойством box-shadow допускается использование в объявлении от двух до четырех числовых значений для одной тени. К обязательным значениям этого свойства относятся только расположение горизонтальной и вертикальной тени. В них допускается использовать отрицательные значения.
К необязательным значениям относятся значение цвета тени (по умолчанию currentColor), радиус размытия (по умолчанию 0, отрицательные значения не допускаются) и размер тени, или радиус растяжения (значение по умолчанию 0).
Если необязательные параметры пропущены, размытие и расширение равны нулю, а цвет — currentColor. Например, box-shadow: 2px 3px равносильно box-shadow: 2px 3px 0 0 currentColor.

Если цвет не указан, используется currentColor — вычисленный цвет текста элемента. Цвет по умолчанию не обязательно чёрный.

В генераторе теней можно подобрать смещения, размытие и цвет тени и получить готовый CSS.

Попробуйте значения box-shadow

Сравните резкую внешнюю тень, размытую тень и внутреннюю inset. Тень не меняет размер элемента.

Значение свойстваbox-shadow: none;box-shadow: 8px 8px 0 #245a85;box-shadow: 0 8px 16px #245a8580;box-shadow: inset 0 0 18px #245a85;

box-shadow: none

HTML и CSS примера

HTML

<div class="demo-target">Рамка элемента</div>

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  box-shadow: none;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  box-shadow: 8px 8px 0 #245a85;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  box-shadow: 0 8px 16px #245a8580;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  box-shadow: inset 0 0 18px #245a85;
}

Тень не занимает места в раскладке и может обрезаться переполнением предка. Она повторяет коробку и её скругление, а не прозрачный силуэт PNG. Внутренняя тень рисуется поверх фона, но под содержимым: для затемнения фотографии используйте фон обёртки. Для тени по силуэту подходит фильтр drop-shadow().

Поддержка браузерами

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.box-shadow
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`box-shadow`	✓10 Версия 10 выпущена в 2011 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 1 выпущена в 2008 г. — Префикс -webkit-	✓12	✓4 Версия 4 выпущена в 2011 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 49 выпущена в 2016 г. — Префикс -webkit- Версия 3.5 выпущена в 2009 г. — Удалено в 13; Префикс -moz-	✓10.5 Версия 10.5 выпущена в 2010 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.	✓5.1 Версия 5.1 выпущена в 2011 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 3 выпущена в 2007 г. — Префикс -webkit-	✓18 Версия 18 выпущена в 2012 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 18 выпущена в 2012 г. — Префикс -webkit-	✓4 Версия 4 выпущена в 2011 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 49 выпущена в 2016 г. — Префикс -webkit- Версия 4 выпущена в 2011 г. — Удалено в 14; Префикс -moz-	✓14 Версия 14 выпущена в 2013 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 14 выпущена в 2013 г. — Префикс -webkit-	✓5 Версия 5 выпущена в 2011 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 1 выпущена в 2007 г. — Префикс -webkit-	✓1.0 Версия 1.0 выпущена в 2013 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 1.0 выпущена в 2013 г. — Префикс -webkit-	✓4.4 Версия 4.4 выпущена в 2013 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 4.4 выпущена в 2013 г. — Префикс -webkit-	✓5 Версия 5 выпущена в 2011 г. Примечание MDN (англ.) Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. Версия 1 выпущена в 2007 г. — Префикс -webkit-
`inset`	✓1	✓12	✓3.5	✓10.5	✓5	✓18	✓4	✓14	✓4.2	✓1.0	✓4.4	✓4.2
Multiple shadows	✓1	✓12	✓3.5	✓10.5	✓3	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`none`	✓1	✓12	✓3.5	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
Spread radius	✓1	✓12	✓3.5	✓10.5	✓5	✓18	✓4	✓14	✓4.2	✓1.0	✓4.4	✓4.2
Ещё 4 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

box-shadow: none | <shadow>#;

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

| — выбор варианта; # — список через запятую.

JavaScript синтаксис:

JavaScript

element.style.boxShadow = "10px 5px 5px red";

Начальное значение свойства

none.

Значения свойства

Значения box-shadow
Значение	Описание
`none`	Тень не отображается. Начальное значение.
`inset`	Необязательное значение. Если это значение не указано (по умолчанию), то тень будет снаружи элемента и создаст эффект выпуклости элемента. При наличии ключевого слова (значения) `inset`, тень будет падать внутри элемента и создаст эффект вдавленности. Другими словами, это изменение от наружной тени к внутренней.
`h-shadow`	Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений.
`v-shadow`	Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений.
`blur-radius`	Необязательное значение. Задаёт радиус размытия. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие - отчетливые тени). Отрицательные значения не допускаются.
`spread-radius`	Необязательное значение. Размер тени (радиус растяжения тени). При положительных значениях тень будет расширяться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента).
`color`	Цвет тени. Если не указан, используется `currentColor` — вычисленный цвет текста элемента.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `box-shadow` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Backgrounds and Borders — спецификация box-shadow.

Наследуется

Нет.

Анимируемое

Да, как список теней: интерполируются смещения, радиусы и цвета. Для box-shadow несовпадение inset делает переключение дискретным.

Примеры, попробуйте сами

Внешняя и внутренняя тень

Измените смещение, размытие и слово inset. Попробуйте добавить вторую тень через запятую.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.sample {
    padding: 24px;
    margin: 20px;
    background: #e6eff5;
}

index.html