Как добавить тень тексту
Короткий ответ
text-shadow принимает смещение по горизонтали и вертикали, размытие и цвет:
<p style="font-size: 32px; font-weight: 700; margin: 0; text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);">Soft shadow</p>Свечение и объём
Без смещения и с большим размытием получается свечение. Несколько теней через запятую рисуются одна под другой:
<div style="padding: 12px; background: black;">
<p style="font-size: 28px; margin: 0; color: white; text-shadow: 0 0 8px deepskyblue, 0 0 16px deepskyblue;">Neon</p>
<p style="font-size: 28px; margin: 0; color: gold; text-shadow: 1px 1px 0 orange, 2px 2px 0 darkorange, 3px 3px 0 sienna;">Retro 3D</p>
</div>Текст поверх фотографии
Белый текст на пёстрой картинке теряется. Мягкая тёмная тень делает его читаемым на любом фоне:
<div style="display: grid; place-items: center; height: 140px; background: url(/media/photo-400x250.jpg) center / cover;">
<h2 style="margin: 0; color: white; text-shadow: 0 1px 6px rgb(0 0 0 / 80%);">Mountain trip</h2>
</div>Частая ошибка
Резкая тёмная тень без размытия у обычного текста делает его грязным и тяжёлым для чтения. Для основного текста тень не нужна вовсе, а в заголовках используйте небольшое смещение и мягкое полупрозрачное размытие.
Функции из этого ответа
- text-shadow — Тень за буквами текста.
- color — Цвет текста (а также цвет рамок и SVG-значков по умолчанию).