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

См. также свойство box-shadow, которое задает фон блоку.

Синтаксис

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

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

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

Значения

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

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

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

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

Как реализовать inset в text-shadow (как в box-shadow) смотрите по ссылке, подпункт "Inset в text-shadow".

Примеры

Пример

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

p {
	text-shadow: 5px 5px 3px black;
}

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

Привет, мир!

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

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

p {
	text-shadow: 15px 15px red;
}

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

Привет, мир!

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

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

p {
	text-shadow: 0px 0px 3px black;
}

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

Привет, мир!

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

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

p {
	text-shadow: 3px 3px 3px red, -3px -3px 3px blue;
}

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

Привет, мир!