text-shadow

Интерактивный пример

text-shadow: 1px 1px 2px pink;

text-shadow: #fc0 1px 0 10px;

text-shadow: 5px 5px #558abb;

text-shadow: red 2px 5px;

text-shadow: 5px 10px;

text-shadow:
  1px 1px 2px red,
  0 0 1em blue,
  0 0 0.2em blue;

<section id="default-example">
  <p id="example-element">
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy...
  </p>
</section>

p {
  font:
    1.5em Georgia,
    serif;
}

Syntax

/* смещение-x | смещение-y | радиус-размытия | цвет */
text-shadow: 1px 1px 2px black;

/* цвет | смещение-x | смещение-y | радиус-размытия */
text-shadow: #fc0 1px 0 10px;

/* смещение-x | смещение-y | цвет */
text-shadow: 5px 5px #558abb;

/* цвет | смещение-x | смещение-y */
text-shadow: white 2px 5px;

/* смещение-x | смещение-y
/* Используем значения по умолчанию для цвета и радиуса-размытия */
text-shadow: 5px 10px;

/* Глобальные значения */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Это свойство определено как разделённый запятыми список теней.

Каждая тень определена как два или три значения <длина>, за которыми следует необязательное значение <цвет>. Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y>. Третье необязательное значение <длина> задаёт <радиус-размытия>. Значение <цвет> определяет цвет тени.

Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.

Это свойство можно применить к псевдо-элементам ::first-line и ::first-letter.

Значения

<цвет>

Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется определить значение цвета явно.

<смещение-x> <смещение-y>

Обязательные. Эти величины <длина> задают расстояние тени от текста. <смещение-x> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <смещение-y> определяет вертикальное расстояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в 0, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <радиус-размытия>.

<радиус-размытия>

Необязательный. Это величина <длина>. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию 0, в случае когда параметр не определён.

Формальный синтаксис

text-shadow = 
  none       |
  <shadow>#  

<shadow> = 
  <color>?                                       &&
  [ <length>{2} [ <length [0,∞]> <length>? ]? ]  &&
  inset?                                         

Примеры

Простая тень

.red-text-shadow {
  text-shadow: red 0 -2px;
}

<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

Множественные тени

.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    serif;
}

<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

Спецификации

Совместимость с браузерами

Примечание Quantum CSS

• В движке Gecko есть программная ошибка в результате которой метод перехода (transition) не будет производить переход от элемента со свойством text-shadow с заданным цветом к элементу со свойством text-shadow без заданного цвета (Firefox bug 726550). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).

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

• Text Shadow CSS Generator - Интерактивный генератор теней CSS.
• box-shadow
• Тип данных <color> (для определения цвета теней)
• Определение цвета для элемента HTML посредством CSS