text-shadow в CSS: 11 стильных примеров

Что делает text-shadow

Свойство text-shadow добавляет тень к тексту и может повысить визуальную выразительность заголовков и логотипов. Оно принимает список теней, разделённых запятыми. Кратко:

color — необязательно, цвет тени;
offset-x offset-y — обязательные смещения по горизонтали и вертикали (length);
blur-radius — необязательно, радиус размытия (length).

Важно: если цвет не указан, значение выбирает браузер, поэтому для кросс-браузерности задавайте цвет явно.

Синтаксис text-shadow

/* Формат: offset-x offset-y blur-radius color (color и blur-radius необязательны) */
text-shadow: 2px 2px 4px red;

/* Цвет можно указывать перед или после смещений */
text-shadow: #18fa3e 1px 2px 10px;
text-shadow: 10px 10px blue;
text-shadow: blue 10px 10px;

/* Глобальные значения */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: unset;

Примечание: отрицательные значения offset-x/offset-y смещают тень влево/вверх.

Полезные советы перед примерами

Импортируйте шрифты (Google Fonts), если в сниппетах указаны кастомные гарнитуры.
Для читаемости избегайте слишком тонких контрастных теней при мелком тексте.
text-shadow вычисляется по символам: сложные многослойные эффекты полезны для крупных заголовков.

1. Морско-зелёный

Текст с многослойной зелёной тенью на пастельном фоне

Используйте этот CSS для эффекта:

background: #A0CBA4;
color: #D5E2D6;
font-family: 'Lobster';
text-shadow: #4A744D 1px 1px,
             #4A744D 0px 0px,
             #4A744D 1px 1px,
             #4A744D 2px 2px,
             #4A744D 3px 3px,
             #4A744D 4px 4px,
             #4A744D 5px 5px,
             #4A744D 6px 6px,
             #4A744D 7px 7px,
             #4A744D 8px 8px,
             #4A744D 9px 9px,
             #4A744D 10px 10px,
             #4A744D 11px 11px,
             #4A744D 12px 12px,
             #4A744D 13px 13px,
             #4A744D 14px 14px,
             #4A744D 15px 15px,
             #4A744D 16px 16px,
             #4A744D 17px 17px,
             #4A744D 18px 18px,
             #4A744D 19px 19px,
             #4A744D 20px 20px,
             #4A744D 21px 21px,
             #4A744D 22px 22px,
             #4A744D 23px 23px,
             #4A744D 24px 24px,
             #4A744D 25px 25px,
             #4A744D 26px 26px,
             #4A744D 27px 27px,
             #4A744D 28px 28px,
             #4A744D 29px 29px;

2. Классический красный

Яркий белый текст с градиентной красной тенью на тёплом фоне

Сниппет для глубокой многослойной тени:

background: #e74c3c;
color: #fff;
font-family: 'Lato', sans-serif;
text-shadow: 1px 1px rgba(123,25,15,0.5),
             2px 2px rgba(129,28,18,0.51),
             3px 3px rgba(135,31,20,0.52),
             /* ...и так далее до 50px */
             50px 50px rgba(230,76,60,0.99);

Совет: такие длинные цепочки создают иллюзию глубины и подходят для героев и логотипов, но обычно не для строк в теле текста.

3. Неоновый контейнер

Тонкий контурный шрифт с многоуровневой светящейся тенью на тёмном фоне

background: #090000;
color: lightyellow;
font-family: 'Londrina Outline', cursive;
text-shadow: 0 0 10px gold,
             0 0 20px firebrick,
             0 0 40px pink,
             0 0 80px red;

Используйте для эффектов типа «неон» и подсветки на тёмном фоне.

4. Слэйт — скейтборд

Текст с последовательными смещениями тени, имитирующими объём

background: #e5e1b3;
color: #fff;
font-family: 'Source Sans Pro', Arial, sans-serif;
text-shadow: 1px 1px 1px #66644d,
             2px 2px 1px #66644d,
             /* ... */
             30px 30px 1px #66644d;

Подходит для винтажных и «стеклянных» имитаций глубины.

5. Рубин и мятный

Контрастный моноширинный шрифт с тёмной тенью на бирюзовом фоне

background: #2CFECB;
color: #FD787A;
font-family: 'Share Tech Mono', monospace;
text-shadow: #402929 1px 1px,
             #402929 -0px 0px,
             #402929 -1px 1px,
             /* ... */
             #402929 -29px 29px;

6. Роузуотер

Объёмный белый текст с многослойной тёмной тенью на розовом фоне

background: #FD9597;
color: #FFFFFF;
font-family: 'Fugaz One', cursive;
text-shadow: #44090D 1px 1px,
             #44090D -0px 0px,
             /* ... */
             #44090D -29px 29px;

7. Неизвестная ириска

Яркий розовый текст с тёмной пурпурной тенью на фиолетовом фоне

background: #823A86;
color: #FA7399;
font-family: 'Lato', sans-serif;
text-shadow: #5E2962 1px 1px,
             #5E2962 -0px 0px,
             /* ... */
             #5E2962 -29px 29px;

8. Мудрец старой школы

Текст в ретро-стиле с褪色ной тенью для эффектов «старой печати»

background: #6A949E;
color: #D7818A;
font-family: 'Special Elite', monospace;
text-shadow: #484A46 1px 1px,
             /* ... */
             #484A46 -29px 29px;

9. Серая неоморфика

Объёмный светлый текст с тенями для неоморфных карточек

background: #ece5da;
color: #f1ebe5;
font-family: 'Paytone One', sans-serif;
text-shadow: 0 13.36px 8.896px #c4b59d,
             0 -2px 1px #fff;

Неоморфные эффекты часто сочетают две противоположные тени: светлую и тёмную.

10. Лимонадный персик

Рукописный шрифт с многослойной тенью в теплой палитре

background: #E6DEDC;
color: #EBA89F;
font-family: 'Amatic SC', cursive;
text-shadow: #2E2B32 1px 1px,
             /* ... */
             #2E2B32 29px 29px;

11. Премиум тёмный

Тёмный фоновый стиль с последовательной тонкой тенью, создающей рельеф

background-color: #333;
color: #e0dfdc;
font-family: 'Avant Garde', 'Century Gothic', sans-serif;
text-shadow: 0 -1px 0 #fff,
             0 1px 0 #2e2e2e,
             0 2px 0 #2c2c2c,
             /* ... */
             0 22px 30px rgba(0,0,0,0.9);

Подходит для «глубоких» темных заголовков и логотипов.

Когда text-shadow не подходит

На мелких размерах шрифта тень может ухудшать читаемость.
При плохом контрасте тень не компенсирует низкую контрастность цвета текста и фона.
Для строгого минималистичного интерфейса многослойные тени будут лишними.

Важно: проверяйте читаемость с реальными пользователями и инструментами проверки контраста.

Альтернативы и дополнения

box-shadow — тени для блоков и кнопок;
filter: drop-shadow(…) — может применяться к inline-элементам и SVG;
SVG-фильтры — гибкая альтернатива для сложных эффектов;
текстовые градиенты (background-clip: text) в сочетании с лёгкой тенью.

Мини-методика: как создать многослойную тень

Выберите базовый цвет тени и направление (право/вниз или лево/вверх).
Добавьте несколько слоёв с растущим смещением (1px, 2px, 3px…) и аккуратно меняйте прозрачность.
При необходимости добавьте один размазанный слой (blur-radius) для мягкого свечения.
Тестируйте на разных размерах текста и экранах.

Чеклист для роли дизайнера и разработчика

Дизайнер: выбрал направление и цвет тени, проверил на макете.
Разработчик: импортировал шрифты, проверил производительность (мобильные устройства).
Тестировщик: проверил читаемость и контрастность на разных устройствах.

Критерии приёмки

Тень не ухудшает читаемость (контраст >= рекомендуемого уровня для текста);
Эффект одинаково воспринимается в основных браузерах;
Время рендеринга страницы не стало критическим (особенно на мобильных).

Примечание по доступности и производительности

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

Краткий глоссарий

offset-x/offset-y — смещения тени по горизонтали/вертикали;
blur-radius — радиус размытия тени;
layer — отдельный элемент в списке text-shadow (разделён запятой).

Итог

Вы получили 11 готовых стилей text-shadow и методику их создания. Используйте эти сниппеты для заголовков, логотипов и крупных элементов интерфейса. Если нужны адаптированные версии под ваш шрифт и палитру — укажите пример, и я помогу подогнать CSS.

Примеры использования text-shadow в CSS