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

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

Свойство box-shadow является одним из свойств CSS3.

Можно добавить несколько эффектов, разделив их запятыми. Если на элементе с тенью задан border-radius, тень будет иметь те же скруглённые углы.

Два первых значения задают смещение тени. H-offset задаёт горизонтальное расстояние. Положительные значения размещают тень справа от элемента. Отрицательные — слева. V-offset задаёт вертикальное расстояние. Положительное значение помещает тень ниже элемента, отрицательное — выше. Если оба значения равны 0, тень появляется непосредственно за элементом.

Третье значение — радиус размытия. Оно необязательно. Чем больше число, тем больше и светлее становится размытие. Отрицательные значения недопустимы. Если значение опущено или равно 0, край тени будет чётким.

Четвёртое значение — радиус растяжения. Оно необязательно. Положительные значения расширяют тень, отрицательные — сужают. Если значение опущено или равно 0, тень имеет тот же размер, что и элемент.

Пятое значение — цвет. Оно необязательно. Если оно опущено, тень принимает вычисленный цвет текста элемента.

Шестое значение — ключевое слово inset. Оно необязательно и может быть размещено в любом месте определения тени. При его наличии создаётся внутренняя тень вместо внешней.

Тонкая, но важная деталь: цвет тени почти всегда задаётся полупрозрачным значением, например rgba(0, 0, 0, 0.2), а не сплошным цветом. Полупрозрачный чёрный смешивается с тем, что находится за элементом, поэтому тень выглядит естественно на любом фоне. Сплошные цвета, такие как black или gray, как правило, смотрятся резко.

Начальное значение	none
Применяется к	Всем элементам. Также применяется к ::first-letter.
Наследуется	Нет.
Анимируемое	Да. Тень блока поддаётся анимации.
Версия	CSS3
Синтаксис DOM	object.style.boxShadow = "15px 25px 35px gray";

Синтаксис

Синтаксис свойства CSS box-shadow

box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;

Давайте попробуем добавить тени к элементу.

Пример свойства box-shadow:

Пример свойства CSS box-shadow

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow example</h2>
    <div></div>
  </body>
</html>

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

Результат

Несколько теней

Можно перечислить значения box-shadow через запятую несколько раз. Например, следующий код отображает 3 тени с разными цветами и позициями на одном элементе.

Пример использования свойства box-shadow для добавления нескольких теней к элементу:

Пример свойства CSS box-shadow с несколькими значениями

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 50%;
        height: 100px;
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Multiple shadows with box-shadow.</h2>
    <div></div>
  </body>
</html>

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

Результат

Теперь добавим элементу значение inset. Оно создаёт тень внутри блока.

Пример свойства box-shadow со значением «inset»:

Пример свойства CSS box-shadow со значением inset

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow with inset value</h2>
    <div></div>
  </body>
</html>

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

Результат

Тень с одной стороны

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

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

.shadow {
  box-shadow: 0 10px 8px -4px yellow;
}

Пример свойства box-shadow с отрицательным значением радиуса растяжения:

Пример свойства box-shadow

<!DOCTYPE html>
<html>
  <head>
    <style>
      .shadow {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 8px -4px yellow;
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <div class="shadow"></div>
  </body>
</html>

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

Распространённые случаи использования

Чаще всего box-shadow применяется для того, чтобы «приподнять» элемент над страницей, придав ему вид отдельной поверхности — карточки, выпадающие меню, модальные окна и кнопки используют именно этот приём. Мягкая, полупрозрачная тень с небольшим вертикальным смещением создаёт эффект лёгкого подъёма:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        width: 220px;
        padding: 20px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.2s ease;
      }
      .card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      }
    </style>
  </head>
  <body>
    <div class="card">Hover me to raise the card.</div>
  </body>
</html>

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

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07);
}

Несколько важных моментов:

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

Значения

Значение	Описание	Демо
none	Тень не задаётся.	Демо »
h-offset	Обязательное. Горизонтальное смещение тени. Положительное значение размещает тень справа от блока, отрицательное — слева.	Демо »
v-offset	Обязательное. Вертикальное смещение тени. Положительное значение размещает тень ниже блока, отрицательное — выше.	Демо »
blur-radius	Необязательное. Размытие тени. Чем больше число, тем сильнее размытие. Отрицательные значения недопустимы.	Демо »
spread-radius	Необязательное. Растяжение тени. Положительное значение увеличивает размер тени, отрицательное — уменьшает.	Демо »
color	Необязательное. Цвет тени. Если не задан, по умолчанию используется цвет текста элемента.	Демо »
inset	Необязательное. Ключевое слово, которое можно разместить в любом месте определения тени. Преобразует внешнюю тень во внутреннюю.	Демо »
initial	Устанавливает свойство в значение по умолчанию.	Демо »
inherit	Наследует свойство от родительского элемента.

Практика

Какие параметры можно задать при определении box-shadow в CSS?

Горизонтальное смещениеВертикальное смещениеРадиус размытияРадиус растяженияЦветПрозрачность