`text-shadow` în CSS

Adaugă una sau mai multe umbre textului, pentru lizibilitate peste imagini sau pentru efecte de strălucire.

Sintaxă CSS

/* offset-x | offset-y | blur | culoare */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
text-shadow: 0 0 8px #38bdf8;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000; /* mai multe umbre */

Ce face `text-shadow`

text-shadow desenează o copie colorată și estompată a literelor, deplasată pe orizontală și verticală. Poți pune mai multe umbre separate prin virgulă; prima din listă este desenată deasupra.

Spre deosebire de box-shadow, text-shadow nu are valoare de extindere (spread) și nici inset.

Cea mai utilă folosire practică: text alb peste o fotografie. O umbră închisă și estompată face textul lizibil pe zonele deschise ale imaginii.

Valori uzuale

Valoare	Descriere
`offset-x`	Deplasarea pe orizontală (pozitiv = la dreapta).
`offset-y`	Deplasarea pe verticală (pozitiv = în jos).
`blur`	Raza de estompare; opțională, implicit 0 (umbră cu margini clare).
`culoare`	Culoarea umbrei; dacă lipsește, se folosește currentcolor.
`none`	Fără umbră; util pentru a anula o umbră moștenită.

Exemple

Exemplul 1: Titlu alb lizibil peste o fotografie

Umbra estompată creează un contur închis discret în jurul literelor.

.banner h1 {
  color: #fff;
  font-size: 2.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

Efect vizual în browser

Titlul alb „Weekend la Sibiu” rămâne lizibil și peste cerul deschis din fotografie, datorită unui halou gri-închis moale sub litere.

Exemplul 2: Efect de neon cu mai multe umbre

Umbrele cu blur din ce în ce mai mare se suprapun și formează o strălucire.

.neon {
  color: #e0f2fe;
  background: #0f172a;
  text-shadow:
    0 0 4px #38bdf8,
    0 0 12px #38bdf8,
    0 0 24px #0ea5e9;
}