text-shadow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations. Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.

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

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

css

/* смещение-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?

Примеры

Простая тень

css

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

html

<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>

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

css

.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;
}

html

<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>

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

Specification
CSS Text Decoration Module Level 3 # text-shadow-property

Начальное значение	`none`
Применяется к	все элементы. Это также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Обработка значения	цвет плюс три абсолютных длины
Animation type	список теней

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

Примечание 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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1 янв. 1970 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content