Иллюстрация: Кира Кустова

`box-shadow`

Свойство, с помощью которого можно задать блоку тень.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство, бросающее тень на ваши блоки 👤

Создано, чтобы имитировать объекты реального мира и создавать иллюзию объёма для плоских элементов интерфейса.

Пример

Скопировано

Частая ситуация — выделить кнопку, задав ей тень, что визуально сделает её объёмной.

        
          
          <button class="button">Купить немедленно!</button>
          <button class="button">Купить немедленно!</button>

Помимо основных оформительских стилей задаём нашей кнопке тень:

        
          
          .button {  box-shadow: -15px 15px 0 0 #ED6742;}
          .button {
  box-shadow: -15px 15px 0 0 #ED6742;
}

Получаем псевдообъёмную кнопку, которая парит над страницей:

Открыть демо в новой вкладке

Как пишется

Скопировано

Каждая тень состоит из следующих значений:

Два, три или четыре значения размера с единицами измерения:
- Если задано два значения, то они расшифровываются как смещение по оси x и по оси y.
- Если задано третье значение, то оно интерпретируется как радиус размытия.
- Если задано четвёртое значение, то оно отвечает за радиус распространения.
Дополнительно (необязательно) можно указать ключевое слово inset, которое превратит тень из внешней во внутреннюю.
Чаще всего, но не обязательно, нужно указывать цвет тени в любом доступном формате цвета.

Разберёмся со всем этим чуть подробнее:

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

Смещения по осям x и y — обязательные значения для тени. Могут принимать любые числовые значения, в том числе отрицательные. Значение по умолчанию равно 0 для обеих осей. Если первое значение положительное, то тень будет справа от элемента, если отрицательное — слева. Если второе значение положительное, то тень будет снизу, если отрицательное — сверху.

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

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

Цвет — вроде бы опциональное, но на самом деле обязательное значение цвета тени. Почему? Если не указывать цвет, то решение остаётся за браузером. Как правило, браузер берёт значение свойства color того элемента, которому задана тень. Но Safari отрисует прозрачную тень. Если вам действительно нужен цвет тени, совпадающий с цветом текста элемента, то это можно указать явно при помощи ключевого слова currentColor.

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

        
          
          .button {  box-shadow:    0 5px 10px gray,    -5px -10px 20px pink;}
          .button {
  box-shadow:
    0 5px 10px gray,
    -5px -10px 20px pink;
}

Как понять

Скопировано

Поскольку всё в вебе по умолчанию плоское и нет источников освещения, тени просто невозможны в компьютерном мире.

Чтобы сделать компьютеры менее враждебными и вызвать у пользователя знакомые эмоции при работе с интерфейсом, дизайнеры периодически обращаются к скевоморфизму с максимально объёмными элементами и тенями.

Слева старый дизайн иконок Apple в стиле скевоморфизма.

Новые, современные эксперименты с дизайном в стиле неоморфизма. Обратите внимание на количество теней (внутренних и внешних) у каждого из элементов. Именно за счёт теней создаётся объём одноцветных элементов.

Подсказки

Скопировано

💡 Свойство задаёт тень именно для блока. Тень будет совпадать с формой блока. Если вы сделали круглый блок при помощи, например, border-box, то тень тоже будет круглой. Если не менять форму элемента, то тень будет прямоугольной.

💡 Если нужна тень для букв в тексте, используйте свойство text-shadow.

На практике

Скопировано

Никита Дубко советует

Скопировано

🛠 При помощи теней можно рисовать в стиле пиксель-арт. Для этого создаётся базовый «пиксель», от которого тенями рисуется остальная картинка.

        
          
          <div class="pixel-art"></div>
          <div class="pixel-art"></div>

        
          
          :root {  /* Размер ячейки */  --s: 4px;}.pixel-art {  height: var(--s);  width: var(--s);  color: #FFFFFF;  box-shadow:    calc(var(--s) * 4) calc(var(--s) * 8) 0 0,    calc(var(--s) * 5) calc(var(--s) * 8) 0 0,    calc(var(--s) * 18) calc(var(--s) * 8) 0 0,    /* ... */    calc(var(--s) * 90) calc(var(--s) * 33) 0 0,    calc(var(--s) * 91) calc(var(--s) * 33) 0 0;}
          :root {
  /* Размер ячейки */
  --s: 4px;
}

.pixel-art {
  height: var(--s);
  width: var(--s);
  color: #FFFFFF;
  box-shadow:
    calc(var(--s) * 4) calc(var(--s) * 8) 0 0,
    calc(var(--s) * 5) calc(var(--s) * 8) 0 0,
    calc(var(--s) * 18) calc(var(--s) * 8) 0 0,
    /* ... */
    calc(var(--s) * 90) calc(var(--s) * 33) 0 0,
    calc(var(--s) * 91) calc(var(--s) * 33) 0 0;
}

Если не указывать значение цвета в box-shadow, тень покрасится в цвет текста, который мы указали в color. Как если бы мы указали цвет тени с помощью currentColor.

Открыть демо в новой вкладке

Алёна Батицкая советует

Скопировано

🛠 С помощью тени можно создать блок с несколькими рамками!

        
          
          <div class="box square"></div><div class="box circle"></div>
          <div class="box square"></div>
<div class="box circle"></div>

        
          
          .box {  width: 120px;  height: 120px;  box-shadow:    inset 0 0 6px 0 #c000ff,    0 0 0 3px #c000ff,    0 0 6px 3px #c000ff,    0 0 0 7px #18191C,    0 0 0 10px #6e4aff,    0 0 6px 10px #6e4aff,    0 0 0 14px #18191C,    0 0 0 17px #c000ff,    0 0 6px 17px #c000ff;}
          .box {
  width: 120px;
  height: 120px;
  box-shadow:
    inset 0 0 6px 0 #c000ff,
    0 0 0 3px #c000ff,
    0 0 6px 3px #c000ff,
    0 0 0 7px #18191C,
    0 0 0 10px #6e4aff,
    0 0 6px 10px #6e4aff,
    0 0 0 14px #18191C,
    0 0 0 17px #c000ff,
    0 0 6px 17px #c000ff;
}

Открыть демо в новой вкладке

🛠 Тени можно использовать для ховер-эффектов. При помощи теней кнопка сделана выпуклой, а при нажатии она становится вдавленной за счёт изменения положения теней.

        
          
          <button class="btn">Зажми</button>
          <button class="btn">Зажми</button>

        
          
          .btn {  box-shadow:    5px 5px 10px #020d18,    inset -5px -5px 8px -4px #020d18,    -5px -5px 10px #3185d5,    inset 5px 5px 8px -4px #3185d5;}.btn:active {  box-shadow:    5px 5px 10px #020d18,    inset -5px -5px 8px -4px #020d18,    inset -6px -6px 8px 0 #3185d5,    -5px -5px 10px #3185d5,    inset 5px 5px 8px -4px #3185d5,    inset 6px 6px 8px 0 #c9c9c9;}
          .btn {
  box-shadow:
    5px 5px 10px #020d18,
    inset -5px -5px 8px -4px #020d18,
    -5px -5px 10px #3185d5,
    inset 5px 5px 8px -4px #3185d5;
}

.btn:active {
  box-shadow:
    5px 5px 10px #020d18,
    inset -5px -5px 8px -4px #020d18,
    inset -6px -6px 8px 0 #3185d5,
    -5px -5px 10px #3185d5,
    inset 5px 5px 8px -4px #3185d5,
    inset 6px 6px 8px 0 #c9c9c9;
}

Открыть демо в новой вкладке

Татьяна Фокина советует

Скопировано

🛠 Если используете box-shadow для стилей фокуса, то они не поддерживаются в режиме высокой контрастности в Windows. Режим ограничивает количество цветов, чтобы повысить читаемость текста за счёт изменения контраста текста и фона.

Чтобы фокус был виден всем пользователям, задайте альтернативные стили в директиве @media со значением forced-colors.

        
          
          a:focus {  outline: none;  box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;}@media (forced-colors: active) {  a:focus {    outline: 0.2em solid;  }}
          a:focus {
  outline: none;
  box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;
}

@media (forced-colors: active) {
  a:focus {
    outline: 0.2em solid;
  }
}

Второй способ решения проблемы с видимостью box-shadow в режиме высокой контрастности — прозрачный outline.

        
          
          a:focus {  outline: 2px solid transparent;  box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;}
          a:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;
}

Кратко

Пример

Как пишется

Как понять

Подсказки

На практике

Никита Дубко советует

Алёна Батицкая советует

Татьяна Фокина советует

Читайте также

text-shadow

box-sizing

color

`text-shadow`

`box-sizing`

`color`