Свойство CSS text-shadow
Используйте свойство CSS text-shadow для задания тени текста. Изучите значения свойства и попробуйте примеры.
Свойство CSS text-shadow добавляет одну или несколько теней к тексту элемента. Оно входит в число свойств CSS3 и широко используется для создания тонкой глубины, эффектов свечения и улучшения читаемости текста на насыщенных фонах.
На этой странице описаны синтаксис, все значения, способы наложения нескольких теней, распространённые визуальные эффекты (падающая тень, свечение, рельефный текст), замечания по доступности, а также отличия text-shadow от box-shadow.
Принцип работы
Одна тень задаётся 2 или 3 значениями длины, за которыми следует необязательный <color>:
- x-offset (первое значение, обязательное) — горизонтальное смещение. Положительное значение сдвигает тень вправо, отрицательное — влево.
- y-offset (второе значение, обязательное) — вертикальное смещение. Положительное значение сдвигает тень вниз, отрицательное — вверх.
- blur-radius (третье значение, необязательное) — мягкость тени. Чем больше значение, тем мягче и шире тень. Не может быть отрицательным; по умолчанию равно
0(чёткая тень). - color (необязательное) — цвет тени. Если не указан, браузеры используют значение свойства
colorэлемента. Можно применять цвета HTML: названия, hex,rgb(),rgba(),hsl()илиhsla().
x-offset и y-offset обязательны; blur-radius и color — необязательны. Цвет и два смещения можно записывать в любом порядке, однако значения смещений должны следовать в порядке x, y, blur.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируется | Да. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.textShadow = "1px 3px 3px #8ebf42"; |
Синтаксис
Синтаксис свойства CSS text-shadow
text-shadow: h-shadow v-shadow [blur-radius] [color] | none | initial | inherit;Пример свойства text-shadow:
Пример свойства CSS text-shadow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.shadow {
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Some paragraph for example.</p>
<p class="shadow">Some paragraph with the text-shadow property.</p>
</body>
</html>Результат
Пример свойства text-shadow со значениями "x-offset", "y-offset", "blur-radius" и "color":
Пример свойства CSS text-shadow с указанными x-offset, y-offset, blur-radius и color
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 3px 2px #8ebf42;
font: 1em Roboto, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Наложение нескольких теней
Несколько теней для одного текста задаются через запятую. Тени отрисовываются спереди назад: первая тень в списке находится сверху, каждая последующая — позади предыдущей. На этом принципе основаны эффекты свечения, контура и трёхмерности.
/* a soft glow built from two stacked shadows */
.glow {
color: #fff;
text-shadow:
0 0 5px #8ebf42,
0 0 15px #8ebf42;
}
/* a simple two-tone outline */
.outline {
text-shadow:
1px 1px 0 #1c87c9,
-1px -1px 0 #1c87c9;
}Распространённые эффекты
| Эффект | Пример значения | Что делает |
|---|---|---|
| Тонкая падающая тень | text-shadow: 1px 1px 2px rgba(0,0,0,0.4); | Слегка приподнимает текст над страницей. |
| Неоновое свечение | text-shadow: 0 0 8px #0ff, 0 0 16px #0ff; | Две наложенные размытые тени одного цвета. |
| Рельефный (гравированный) | text-shadow: 0 1px 1px rgba(255,255,255,0.6); | Светлая тень под тёмным текстом создаёт эффект гравировки. |
| Читаемость на фото | text-shadow: 0 1px 3px rgba(0,0,0,0.8); | Тёмное размытие за светлым текстом сохраняет его разборчивость. |
Используйте text-shadow для улучшения читаемости и оформления, а не как замену реального контраста. Тяжёлые или малоконтрастные тени могут затруднять чтение для некоторых пользователей, поэтому сам по себе контраст текста и фона должен быть достаточным.
text-shadow vs box-shadow
text-shadow рисует тень вокруг глифов (форм букв) текста, тогда как box-shadow рисует тень вокруг прямоугольного блока элемента. Используйте text-shadow, когда тень должна повторять контур символов, и box-shadow — для карточек, кнопок и других блочных элементов интерфейса.
Значения
| Значение | Описание |
|---|---|
h-shadow | Горизонтальное смещение (ось x). Положительное значение рисует тень справа, отрицательное — слева. |
v-shadow | Вертикальное смещение (ось y). Положительное значение рисует тень под текстом, отрицательное — над ним. |
blur-radius | Определяет размер и размытость тени. Отрицательные значения не допускаются. По умолчанию равно 0. |
color | Цвет тени. Можно использовать названия цветов, hex-коды, rgb(), rgba(), hsl() и hsla(). |
none | Тень не применяется. Это значение по умолчанию для данного свойства. |
initial | Устанавливает свойство в значение по умолчанию (none). |
inherit | Наследует свойство от родительского элемента. |
Поддержка браузерами и связанные свойства
text-shadow поддерживается во всех современных браузерах. Тень не влияет на макет — она отрисовывается за пределами блока и никогда не изменяет размер элемента или положение окружающего содержимого.
Дополнительная информация: box-shadow, color, opacity, text-decoration, а также псевдоэлементы ::first-letter и ::first-line, к которым text-shadow тоже применяется.