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

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

Синтаксис box-shadow

Свойство box-shadow состоит из пяти параметров: смещение по горизонтали, смещение по вертикали, размытие, растяжение и цвет тени. В начале вы можете указать необязательный параметр inset - тогда тень будет внутренней.

В отличие от таких составных свойств, как background, transition или border, у box-shadow нет отдельных свойств, которые попадают в произвольном порядке в составное, поэтому порядок свойств надо соблюдать.

Варианты использования параметров свойства box-shadow

Тень с нулевым смещением распределяется вокруг объекта

Тень вокруг элемента цвета текста

box-shadow: 0 0 10px;

Внутренняя тень с с аналогичными параметрами

Внутренняя тень

box-shadow: inset 0 0 10px;

Положительные значения для смещения

Смещение вниз и вправо

box-shadow: 5px 5px 10px;

Отрицательные значения для смещения

Смещение вверх и влево

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

При указании цвета тень получается другой

Внутренняя тень с цветом

box-shadow: inset 0 0 5px 5px #1e8cbe;

Внешняя цветная тень

box-shadow: 0 0 5px 5px #1e8cbe;

Если отсутствует размытие, то оно приравнивается к 0

Смещение жесткой тени вниз без размытия

box-shadow: 20px 10px;

Смещение жесткой тени вверх

box-shadow: 10px -20px;

Большое значение размытия скругляет края тени

Большой радиус размытия тени

box-shadow: 5px 5px 20px;

Размер тени, или дистанции от тени до элемента (spread). При положительном значении тень увеличивается, выходя за пределы элемента, а при отрицательном - тень уменьшается и сжимается.

Положительное значение размера тени (spread)

box-shadow: 0 0 10px 5px;

Отрицательное значение размера тени (spread)

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

Если не указать цвет тени, он будет совпадать с цветом текста

Значение цвета для тени по умолчанию

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

Если цвет тени указан , то тень будет указанного цвета

Указываем значение цвета тени

color: red;
box-shadow: 0 0 10px 5px blue;

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

Множественные тени: вверху и внизу

box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;

Множественные тени: внутренняя и внешняя

  box-shadow: inset 10px 10px 10px 2px rgba(34, 60, 80, 0.2),
                10px 10px 10px 2px rgba(34, 60, 80, 0.2);

Тень может изменяться при наведении

Изменение тени при наведении

.box-hover {
    box-shadow: 0 0 5px 5px rgba(30, 30, 30, 0.5);
    transition: 0.5s;
}
.box-hover:hover {
    transform: scale(0.8);
    box-shadow: 10px 10px 15px 2px rgba(50, 50, 50, 0.2);
    transition: box-shadow 0.5s, transform 0.5s;
}

В случае, если для элемента прописано свойство clip-path, указывать тень нужно не с помощью свойства box-shadow, а с помощью свойства filter, причем задавать тень нужно элементу-обертке, а не тому, для которого указан clip-path.

Тень для элемента с clip-path

  .box-clip-path {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  }
  .box-holder {
    filter: drop-shadow(5px 5px 5px rgba(60, 60, 60, .5));
  }

Все параметры свойства box-shadow вы можете попробовать и изменить в генераторе теней или прямо здесь в примере ниже.

See the Pen CSS Box Shadow Generator - Day 29 of #30Days30Projects by Ishaan Sheikh (@sheikh_ishaan) on CodePen.

Пример с различными видами теней. Кликните для копирования по выбранному блоку.

See the Pen CSS Property box-shadow by Elen (@ambassador) on CodePen.

Пример со множественными тенями

Для социальных иконок добавлены множественными тенями для самого элемента и для текста.

See the Pen box-shadow in social icons by Elen (@ambassador) on CodePen.

Пример с иконками соцсетей от автора Akash bhandwalka. Здесь использовано изменение тени при наведении.

See the Pen social media share icons by Elen (@ambassador) on CodePen.

Таблица цен

See the Pen CSS3 pricing table by Arkev (@arkev) on CodePen.

Пример с эффектами в виде теней, добавленных к псевдоэлементам ::before и ::after

See the Pen Box-shadow effects with ::before and ::after by Elen (@ambassador) on CodePen.

Использование box-shadow для UI-элементов

Автор Maria Marin

See the Pen Neumorphic Elements by Maria Marin (@myacode) on CodePen.

Пример с использованием теней при наведении на кнопки

See the Pen Button hover effects with box-shadow by Elen (@ambassador) on CodePen.

Кнопки с тенью при нажатии и без

Автор Burmese Potato

See the Pen Neumorphic Button @dribbble by Burmese Potato (@BurmesePotato) on CodePen.

Пример изображения iPhone средствами HTML/CSS с использованием свойства box-shadow

Автор Fabrizio Bianchi

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@_fbrz) on CodePen.

Пример MacBook

Автор Burak Can

See the Pen CSS only 3d Macbook Air by Burak Can (@neoberg) on CodePen.

Пример с изменением тени в зависимости от положения курсора

Автор Marc López Ávila

See the Pen 3D CSS/JS dynamic shadow by Marc López Ávila (@Loopez10) on CodePen.