Generator text-shadow CSS

Exemple de text-shadow

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Umbră discretă Ajută textul deschis să se citească peste imagini.

.element {
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

Neon Mai multe straturi fără deplasare, cu estompare din ce în ce mai mare, pe fundal închis.

.element {
  text-shadow: 0 0 4px #ffffff,
    0 0 12px #22d3ee,
    0 0 28px #22d3ee,
    0 0 48px #0891b2;
}

Neon roz Aceeași tehnică, în roz; textul alb rămâne miezul luminos.

.element {
  text-shadow: 0 0 4px #ffffff,
    0 0 14px #ec4899,
    0 0 32px #db2777;
}

Retro 3D Umbre fără estompare, deplasate câte 1px, care dau grosime literelor.

.element {
  text-shadow: 1px 1px 0 #f97316,
    2px 2px 0 #f97316,
    3px 3px 0 #f97316,
    4px 4px 0 #f97316,
    6px 6px 0 #1e1b4b;
}

Contur Patru umbre pe diagonale desenează un contur în jurul literelor.

.element {
  text-shadow: -2px -2px 0 #0f172a,
    2px -2px 0 #0f172a,
    -2px 2px 0 #0f172a,
    2px 2px 0 #0f172a;
}

Foc Umbre deplasate în sus, din galben în roșu.

.element {
  text-shadow: 0 -2px 4px #fde047,
    0 -6px 10px #f97316,
    0 -12px 20px #dc2626;
}

Text gravat O linie albă dedesubt și una închisă deasupra: textul pare tăiat în suprafață.

.element {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),
    0 -1px 0 rgba(51, 65, 85, 0.6);
}

Umbră lungă Multe umbre la distanțe crescătoare formează o umbră lungă, în stil flat design.

.element {
  text-shadow: 1px 1px 0 #1d4ed8,
    2px 2px 0 #1d4ed8,
    3px 3px 0 #1d4ed8,
    4px 4px 0 #1d4ed8,
    5px 5px 0 #1d4ed8,
    6px 6px 0 #1d4ed8,
    7px 7px 0 #1d4ed8,
    8px 8px 0 #1d4ed8;
}

Cum folosești generatorul de text-shadow

Scrie textul tău și alege mărimea, grosimea fontului și culorile.
Pornește de la un efect gata făcut (neon, retro 3D, contur) sau construiește umbra de la zero.
Adaugă straturi cu + Umbră; fiecare strat are deplasare, estompare și culoare.

Sintaxa text-shadow

Ordinea este: deplasare orizontală, deplasare verticală, estompare, culoare. Spre deosebire de box-shadow, aici nu există extindere (spread) și nici inset.

h1 {
  text-shadow: 2px 2px 4px rgba(15, 23, 42, 0.35);
}

Efecte cu mai multe straturi

Neon: mai multe umbre fără deplasare, cu estompare din ce în ce mai mare, pe un fundal închis. Retro 3D: umbre fără estompare, deplasate câte 1px, care formează o „grosime”. Contur: patru umbre fără estompare, câte una pe fiecare diagonală.

.neon {
  color: #fff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #22d3ee,
    0 0 28px #22d3ee;
}

Întrebări frecvente

Pot face un contur adevărat pentru text?

Da, cu -webkit-text-stroke: 2px #000, suportat în toate browserele actuale. Conturul din umbre are avantajul că nu subțiază literele, pentru că se desenează în afara lor.

text-shadow afectează citirea?

Umbrele puternice scad lizibilitatea textului mic. Folosește efectele mari pentru titluri și o umbră discretă (sau deloc) pentru textul de citit.