Исполняемые доки CSS: Тень текста

Q: Какой синтаксис у text-shadow?

text-shadow: offset-x offset-y blur-radius color;, например text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Оба смещения обязательны; размытие по умолчанию 0, а цвет по умолчанию цвет текста.

Q: Как добавить несколько теней к тексту?

Разделите тени запятыми: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. Первая тень рисуется поверх следующих.

Q: Есть ли у text-shadow значение spread, как у box-shadow?

Нет. У text-shadow нет spread и нет ключевого слова inset. Чтобы сделать тень вокруг букв толще, сложите несколько теней или используйте -webkit-text-stroke для обводки.

Тень текста в CSS: text-shadow, свечение, обводка

text-shadow рисует одну или несколько теней за текстом. Разберем четыре значения (смещение по x, смещение по y, размытие, цвет), как складывать тени для свечения, обводки и объемного текста и как тень помогает читать текст на пестром фоне.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как работает text-shadow

text-shadow рисует за текстом его копию, смещенную и размытую. Вы задаете горизонтальное смещение, вертикальное смещение, необязательное размытие и цвет.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b означает 3px вправо (физически, при любом направлении письма), 3px вниз, без размытия, янтарный. Вторая тень размыта на 6px и использует полупрозрачный черный, это обычный рецепт для легкого эффекта глубины.

Синтаксис

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

Значение	Обязательно	Смысл
offset-x	Да	Положительное сдвигает тень вправо, отрицательное влево
offset-y	Да	Положительное сдвигает вниз, отрицательное вверх
blur-radius	Нет (по умолчанию 0)	Насколько мягкий край; отрицательные значения невалидны
color	Нет (по умолчанию цвет текста)	Может стоять первым или последним

text-shadow: none убирает унаследованную тень. Меняйте значения ниже, чтобы увидеть действие каждого:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Попробуйте -4px -4px 0 #16a34a, 0 0 10px red и две тени через запятую.

Несколько теней: свечение, обводка и объем

Запятые складывают тени; первая рисуется сверху. Из одного этого правила получаются три эффекта:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

Свечение: нулевые смещения, растущее размытие, темный фон.
Обводка: четыре четкие тени, по одной на каждую диагональ. Подходит для тонкой обводки; для более толстой ровной обводки -webkit-text-stroke: 2px #111827 (поддерживается во всех актуальных браузерах, несмотря на префикс) рисует контур по краям букв.
Объем: серия четких теней, каждая на 1px дальше, и буквы выглядят выдавленными.

Читаемый текст на пестром фоне

Белый текст на фотографии или узоре теряет края там, где фон светлый. Мягкая темная тень возвращает их без видимой подложки:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

Тень помогает, но не гарантирует контрастность. Для длинного текста поверх изображения добавьте за текстом еще и сплошную или градиентную подложку.

text-shadow и box-shadow

	text-shadow	box-shadow
Повторяет	Формы букв	Блок элемента (и его скругление)
Значение spread	Нет	Да
`inset`	Нет	Да
Несколько через запятую	Да	Да

Тени для карточек и кнопок разобраны на странице тень box-shadow.

Частые ошибки

Тяжелые темные тени на основном тексте. Они размывают формы букв. Оставьте тени для заголовков и коротких подписей.
Забытое второе смещение. text-shadow: 2px #000 невалидно; оба смещения обязательны.
Отрицательное размытие. Оно невалидно, и все объявление отбрасывается.
Ожидание, что тень займет место. Она только рисуется; большие тени могут перекрыть следующую строку или обрезаться через overflow: hidden.
Свечение на светлом фоне. Светлое свечение на белом не видно. Свечению нужен темный фон.

Часто задаваемые вопросы

Какой синтаксис у text-shadow?

text-shadow: offset-x offset-y blur-radius color;, например text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Оба смещения обязательны; размытие по умолчанию 0, а цвет по умолчанию цвет текста.

Как добавить несколько теней к тексту?

Разделите тени запятыми: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. Первая тень рисуется поверх следующих.

Как сделать эффект свечения текста?

Используйте тени без смещения и с размытием, часто несколько с растущим размытием: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. На темном фоне это выглядит как неоновое свечение.

Есть ли у text-shadow значение spread, как у box-shadow?

Нет. У text-shadow нет spread и нет ключевого слова inset. Чтобы сделать тень вокруг букв толще, сложите несколько теней или используйте -webkit-text-stroke для обводки.

Влияет ли text-shadow на раскладку?

Нет. Тень только рисуется: она не занимает места и не сдвигает соседнее содержимое, поэтому большая тень может перекрывать элементы рядом.

Связанные концепции