Вы здесь

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

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

CSS синтаксис

box-shadow: none | x-сдвиг y-сдвиг размытие растяжение цвет | inset | initial | inherit;

Возможные значения

Значение Описание
none Значение по умолчанию. Тень не отображается.
x-сдвиг Обязательное значение. Смещение тени по горизонтали относительно элемента. Положительное значение задает сдвиг тени вправо, отрицательное - влево.
y-сдвиг Обязательное значение. Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное - вверх.
размытие Необязательное значение. Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение Необязательное значение. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет Необязательное значение. Устанавливает цвет тени. По умолчанию тень черная. (см. Как использовать цвета)
inset Необязательное значение. Переключает отображение тени снаружи элемента на отображение внутри элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Добавляем тень элементу <div>


div {
     box-shadow: 10px 10px 5px #888888;
}