---
title: text-shadow
slug: Web/CSS/text-shadow
translation_of: Web/CSS/text-shadow
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">CSS-свойство <strong><code>text-shadow</code></strong> добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам <code><a href="/en-US/docs/Web/CSS/text-decoration">decorations</a></code>.</span> Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.</p>
<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
<p class="hidden">Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам запрос на извлечение (pull request).</p>
<h2 id="Syntax_2">Syntax</h2>
<pre class="brush:css no-line-numbers">/* смещение-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;
</pre>
<p>Это свойство определено как разделённый запятыми список теней.</p>
<p>Каждая тень определена как два или три значения <code><длина></code>, за которыми следует необязательное значение <code><цвет></code>. Первые два значения <code><длина></code> определяют параметры <code><смещение-x></code> и <code><смещение-y></code>. Третье необязательное значение <code><длина> задаёт</code> <code><радиус-размытия></code>. Значение <code><цвет></code> определяет цвет тени.</p>
<p>Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.</p>
<p>Это свойство можно применить к <a href="/ru-RU/docs/Web/CSS/Pseudo-elements">псевдо-элементам</a> {{cssxref("::first-line")}} и {{cssxref("::first-letter")}}.</p>
<h3 id="Значения">Значения</h3>
<dl>
<dt>{{cssxref("<цвет>")}}</dt>
<dd>Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется определить значение цвета явно.</dd>
<dt><code><смещение-x> <смещение-y></code></dt>
<dd>Обязательные. Эти величины {{cssxref("<длина>")}} задают расстояние тени от текста. <code><смещение-x></code> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <code><смещение-y></code> определяет вертикальное расстояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в <code>0</code>, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <code><радиус-размытия></code>.</dd>
<dt><code><радиус-размытия></code></dt>
<dd>Необязательный. Это величина {{cssxref("<длина>")}}. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию <code>0</code>, в случае когда параметр не определён.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<h3 id="Простая_тень">Простая тень</h3>
<div>
<pre class="brush: css">.red-text-shadow {
text-shadow: red 0 -2px;
}</pre>
<pre class="brush: 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></pre>
</div>
<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
<h3 id="Множественные_тени">Множественные тени</h3>
<div>
<pre class="brush: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;
}</pre>
<pre class="brush: 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></pre>
</div>
<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Определяет <code>text-shadow</code> как анимируемую.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>Свойство CSS <code>text-shadow</code> было <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">ошибочно определено в CSS2</a> и удалено из CSS2 (Level 1). Спецификация The CSS Text Module Level 3 исправила синтаксис. Позже оно было перемещено в <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
</tr>
</tbody>
</table>
<p id="Syntax">{{cssinfo}}</p>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div class="hidden">Таблица совместимости на этой странице была сформирована из структурированных данных. Если вы хотите внести вклад в эти данные, сверьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение (pull request).</div>
<p>{{Compat("css.properties.text-shadow")}}</p>
<h3 id="Примечание_Quantum_CSS">Примечание Quantum CSS</h3>
<ul>
<li>В движке Gecko есть программная ошибка в результате которой метод перехода ({{cssxref("transition")}}) не будет производить переход от элемента со свойством <code>text-shadow</code> с заданным цветом к элементу со свойством <code>text-shadow</code> без заданного цвета ({{bug(726550)}}). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, выпуск которого запланирован уже в версии Firefox 57).</li>
</ul>
<h2 id="Также_смотрите">Также смотрите</h2>
<ul>
<li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - Интерактивный генератор теней CSS.</li>
<li>{{cssxref("box-shadow")}}</li>
<li>Тип данных {{cssxref("<color>")}} (для определения цвета теней)</li>
<li><a href="/ru-RU/docs/Web/HTML/Applying_color">Определение цвета для элемента HTML посредством CSS</a></li>
</ul>