text-shadow

Wartości

• offset-x, offset-y – o ile cień jest przesunięty w prawo i w dół (wartości ujemne w lewo i w górę).
• rozmycie – opcjonalne, domyślnie 0 (ostry cień).
• kolor – opcjonalny, domyślnie kolor tekstu.
• kilka cieni oddzielonych przecinkami – pierwszy leży na wierzchu.
• none – domyślnie: bez cienia.

Wartość początkowa: none. Dziedziczona: tak. Dotyczy: wszystkich elementów.

Przykłady

Miękki cień, ostry przesunięty cień i kontur z kilku cieni:

<p class="soft">Miękki cień</p>
<p class="sharp">Ostry cień</p>
<p class="outline">Kontur</p>

p { margin: 0 0 8px; font: 700 28px Arial, sans-serif; }
.soft { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.sharp { color: #0088d1; text-shadow: 3px 3px 0 #ffe0b2; }
.outline {
  color: #fff;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}

Biały tekst na kolorowym tle – cień poprawia czytelność:

<div class="banner">Letnia oferta</div>

.banner {
  max-width: 300px;
  padding: 24px 12px;
  color: #fff;
  background: linear-gradient(90deg, #ffe082, #4fc3f7);
  font: 700 24px Arial, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

Na co uważać

• W odróżnieniu od box-shadow nie ma rozciągnięcia (czwartej długości) ani inset – taka deklaracja jest nieprawidłowa.
• Cień nie zmienia wymiarów elementu i nie liczy się do układu; duży cień może wystawać na sąsiednie elementy albo zostać przycięty przez overflow: hidden.
• Cień jest dziedziczony – ustawiony na nagłówku, dostają go także odnośniki w środku. Usuwa się go przez text-shadow: none.
• Cień nie zastąpi wystarczającego kontrastu między kolorem tekstu a tłem.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 2, Firefox 3.5, Safari 1.1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
box-shadow
color
filter