# Свойство text-shadow

Свойство `text-shadow` задает тень тексту. В качестве значения свойство принимает `4` параметра, перечисляемые через пробел, либо ключевое слово `none`, отменяющее тень совсем (это значение по умолчанию).

## Синтаксис

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

## Параметры

Параметр | Описание
--- | ---
сдвиг по x | Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное - влево.
сдвиг по y | Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное - вверх.
размытие | Задает размытие тени. Чем больше значение - тем более размытой будет тень. Необязательный параметр. Если не задан - тень будет четкой.
цвет | Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан - цвет тени совпадает с цветом текста.

Смещения по осям и размытие задаются в любых единицах для размеров, кроме процентов.

## Пример

Давайте сдвинем тень вниз и влево и добавим небольшое размытие:

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { text-shadow: 5px 5px 3px black; }`

:

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

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

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { text-shadow: 10px 10px red; }`

:

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

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

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { text-shadow: 0px 0px 3px black; }`

:

## Смотрите также

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

←→
↑