Тень текста

Свойство пришло из CSS2, затем на время выпало из спецификации и вернулось в модуле CSS Text Decoration. Сейчас его поддерживают все браузеры. Чаще всего тень текста нужна не для красоты, а для читаемости: белый заголовок поверх фотографии теряется на светлых участках, а лёгкая тёмная подложка вокруг букв делает его различимым на любом фоне.

В отличие от тени блока, тень текста строится по контуру глифов, а не по прямоугольнику элемента. У неё нет растяжения и внутреннего варианта inset — только смещение по горизонтали и вертикали, радиус размытия и цвет. Цвет можно не указывать, тогда берётся текущий цвет текста.

Примеры эффектов

/* читаемость на фото */
.hero h1 { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }

/* свечение */
.neon { color: #fff; text-shadow: 0 0 4px #0ff, 0 0 12px #0ff; }

/* «выдавленная» надпись */
.engraved { color: #888; text-shadow: 0 1px 0 #fff; }

/* сброс тени у вложенного элемента */
.hero small { text-shadow: none; }

Несколько теней перечисляют через запятую; первая в списке лежит сверху. Свойство наследуется, поэтому тень, заданная заголовку, перейдёт на все вложенные ссылки и подписи — там её иногда приходится явно отключать.

Где тень мешает

• Тень вместо контраста. Если текст плохо читается на фоне, надёжнее затемнить саму картинку полупрозрачным слоем. Инструменты проверки контраста тень не учитывают, и надпись может не пройти проверку доступности.
• Сильное размытие на мелком тексте. На размерах 12–14 пикселей тень превращает буквы в мутное пятно.
• Тяжёлые эффекты на длинных текстах. Многослойная тень на абзацах замедляет отрисовку при прокрутке, особенно на слабых телефонах.
• Расчёт на тень в особых режимах. В режиме принудительных цветов тени убираются, и текст должен оставаться читаемым без них.

Подбирать оттенок тени удобно от основного цвета фона: полупрозрачный чёрный через rgb(0 0 0 / .5) смотрится мягче, чем сплошной серый.