Свойство text-shadow

Свойство text-shadow задава сянка на текста. Като стойност свойството приема 4 параметъра, изброени през интервал, или ключова дума none, която отменя сянката напълно (това е стойността по подразбиране).

Синтаксис

cssселектор {
  text-shadow: отместване_по_x отместване_по_y размазване цвят;
}

cssселектор {
  text-shadow: none;
}

Параметри

Параметър	Описание
отместване по x	Задава отместване на сянката по оста X. Положителна стойност отмества надясно, отрицателна - наляво.
отместване по y	Задава отместване на сянката по оста Y. Положителна стойност отмества надолу, отрицателна - нагоре.
размазване	Задава размазване на сянката. Колкото по-голяма е стойността - толкова по-размазана ще бъде сянката. Незадължителен параметър. Ако не е зададен - сянката ще бъде четка.
цвят	Задава цвят на сянката във всякакви единици за цвят. Незадължителен параметър. Ако не е зададен - цветът на сянката съвпада с цвета на текста.

Отместванията по осите и размазването се задават във всякакви единици за размери, с изключение на проценти.

Пример

Нека преместим сянката надолу и наляво и добавим леко размазване:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 5px 5px 3px black;
}

Результат:

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

А сега нека направим сянката червена, преместим я надолу и наляво, но премахнем размазването - сянката ще бъде четка:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 10px 10px red;
}

Результат:

Пример . Равномерна сянка

Сега сянката не е отместена, но към нея е добавено размазване:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 0px 0px 3px black;
}

Результат:

Вижте също

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