Dokumentacja CSS z przykładami: Cień tekstu

Q: Jaka jest składnia text-shadow?

text-shadow: offset-x offset-y blur-radius color;, na przykład text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Oba przesunięcia są wymagane; rozmycie domyślnie wynosi 0, a kolor to kolor tekstu.

Q: Jak dodać więcej niż jeden cień tekstu?

Oddziel cienie przecinkami: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. Pierwszy cień jest rysowany nad kolejnymi.

Q: Czy text-shadow ma wartość spread jak box-shadow?

Nie. text-shadow nie ma spread ani słowa kluczowego inset. Żeby pogrubić cień wokół liter, nałóż kilka cieni albo użyj -webkit-text-stroke dla obrysu.

Text shadow CSS: składnia, poświata, obrys i przykłady

text-shadow rysuje jeden lub więcej cieni za tekstem. Poznaj cztery wartości (przesunięcie x, przesunięcie y, rozmycie, kolor), nakładanie cieni dla efektów poświaty, obrysu i 3D oraz użycie cienia, żeby tekst był czytelny na złożonym tle.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Jak działa text-shadow

text-shadow maluje za tekstem jego kopię, przesuniętą i rozmytą. Podajesz przesunięcie poziome, przesunięcie pionowe, opcjonalne rozmycie i kolor.

<!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 oznacza 3px w prawo (fizycznie, w każdym kierunku pisma), 3px w dół, bez rozmycia, bursztynowy. Drugi cień ma rozmycie 6px i półprzezroczystą czerń, co jest typowym przepisem na subtelny efekt głębi.

Składnia

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

Wartość	Wymagana	Znaczenie
offset-x	Tak	Dodatnia przesuwa cień w prawo, ujemna w lewo
offset-y	Tak	Dodatnia przesuwa go w dół, ujemna w górę
blur-radius	Nie (domyślnie 0)	Jak miękka jest krawędź; wartości ujemne są nieprawidłowe
color	Nie (domyślnie kolor tekstu)	Może być na początku albo na końcu

text-shadow: none usuwa odziedziczony cień. Zmień wartości poniżej, żeby zobaczyć efekt każdej z nich:

<!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>

Wypróbuj -4px -4px 0 #16a34a, 0 0 10px red i dwa cienie oddzielone przecinkiem.

Wiele cieni: poświata, obrys i 3D

Przecinki nakładają cienie; pierwszy jest rysowany na wierzchu. Z tej jednej reguły wynikają trzy efekty:

<!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>

Poświata: zerowe przesunięcia, rosnące rozmycie, na ciemnym tle.
Obrys: cztery ostre cienie, po jednym na każdą przekątną. Sprawdza się przy cienkich obrysach; dla grubszego, równego obrysu -webkit-text-stroke: 2px #111827 (obsługiwane we wszystkich aktualnych przeglądarkach mimo prefiksu) rysuje zamiast tego linię na krawędziach liter.
3D: seria ostrych cieni, każdy o 1px dalej, więc litery wyglądają na wytłoczone.

Czytelny tekst na złożonym tle

Biały tekst na zdjęciu lub wzorze traci krawędzie tam, gdzie tło jest jasne. Miękki ciemny cień przywraca je bez widocznego pudełka:

<!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>

Cień pomaga, ale nie gwarantuje kontrastu. Przy dłuższym tekście na obrazku dodaj też za tekstem jednolitą lub gradientową nakładkę.

text-shadow kontra box-shadow

	text-shadow	box-shadow
Podąża za	Kształtami liter	Pudełkiem elementu (i jego zaokrągleniem)
Wartość spread	Nie	Tak
`inset`	Nie	Tak
Wiele cieni po przecinku	Tak	Tak

Cienie na kartach i przyciskach opisuje strona o box-shadow.

Częste błędy

Ciężkie, ciemne cienie na tekście głównym. Rozmywają kształty liter. Zostaw cienie dla nagłówków i krótkich etykiet.
Zapominanie o drugim przesunięciu. text-shadow: 2px #000 jest nieprawidłowe; oba przesunięcia są wymagane.
Ujemne rozmycie. Jest nieprawidłowe i cała deklaracja przepada.
Oczekiwanie, że cień zajmie miejsce. Jest tylko malowany; duże cienie mogą zachodzić na następną linię albo zostać przycięte przez overflow: hidden.
Efekty poświaty na jasnym tle. Jasna poświata na białym tle jest niewidoczna. Poświata potrzebuje ciemnego tła.

Najczęściej zadawane pytania

Jaka jest składnia text-shadow?

text-shadow: offset-x offset-y blur-radius color;, na przykład text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Oba przesunięcia są wymagane; rozmycie domyślnie wynosi 0, a kolor to kolor tekstu.

Jak dodać więcej niż jeden cień tekstu?

Oddziel cienie przecinkami: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. Pierwszy cień jest rysowany nad kolejnymi.

Jak zrobić efekt poświaty na tekście?

Użyj cieni bez przesunięcia i z rozmyciem, często kilku z rosnącym rozmyciem: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. Na ciemnym tle wygląda to jak neonowa poświata.

Czy text-shadow ma wartość spread jak box-shadow?

Nie. text-shadow nie ma spread ani słowa kluczowego inset. Żeby pogrubić cień wokół liter, nałóż kilka cieni albo użyj -webkit-text-stroke dla obrysu.

Czy text-shadow wpływa na układ?

Nie. Cień jest tylko malowany; nie zajmuje miejsca i nie przesuwa otaczającej treści, więc duży cień może zachodzić na pobliskie elementy.

Powiązane zagadnienia