Свойство box-shadow задает тень контейнеру.

См. также свойство text-shadow, которое задает тень тексту.

Синтаксис

селектор {
	box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет | none;
}

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

селектор {
	box-shadow: 1px 1px 3px red, -1px -1px 3px blue;
}

Значения

Значения "сдвиг_по_x", "сдвиг_по_y", "размытие", "размер_тени" задаются в любых CSS единицах (кроме %), а цвет - в любых единицах для цвета (в том числе и rgba для полупрозрачной тени).

Значение none убирает тень.

Значение Описание
inset Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан - то снаружи.
Сдвиг_по_x Обязательный параметр. Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное - влево.
Сдвиг_по_y Обязательный параметр. Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное - вверх (обратите внимание на это - не так, как в математике!).
Размытие Задает размытие тени. Чем больше значение - тем более размытой будет тень (см. примеры для лучшего понимания). Необязательный параметр. Если не задан - тень будет четкая.
Размер_тени Задает размер тени (см. примеры для лучшего понимания). Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан - тень будет такого же размера, что и элемент.
Цвет Цвет тени в любом CSS формате. Необязательный параметр. Если не задан - тень будет черная.

Значение по умолчанию: none.

Примеры

Пример

В данном примере тень сдвинута вниз и влево и добавлено небольшое размытие: 

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Результат выполнения кода:

Пример . Четкая тень

В данном примере тень сдвинута вниз и влево, но размытия нет (тень будет четкой): 

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Результат выполнения кода:

Пример . Равномерная тень

В данном примере тень не сдвинута, но к ней добавлено размытие: 

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Результат выполнения кода:

Пример . Размер тени

В данном примере тень не сдвинута, размытие равно нулю, но к ней добавлен размер (черное - это граница, красное - это тень): 

#elem {
	box-shadow: 0px 0px 0px 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Результат выполнения кода:

Пример . Размытие + размер тени

В данном примере тень не сдвинута, но к ней добавлены размытие и размер (черное - это граница, красное - это тень): 

#elem {
	box-shadow: 0px 0px 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Результат выполнения кода:

Пример . Две тени сразу

В данном примере заданы сразу две тени: 

#elem {
	box-shadow: 3px 3px 3px red, -3px -3px 3px blue;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Результат выполнения кода:

Пример . Внутренняя тень

В данном примере тень находится внутри контейнера: 

#elem {
	box-shadow: inset 0px 0px 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Результат выполнения кода: