Guida CSS interattiva: Text Shadow

Q: Qual è la sintassi di text-shadow?

text-shadow: offset-x offset-y blur-radius color;, per esempio text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. I due offset sono obbligatori; la sfocatura vale 0 per impostazione predefinita e il colore è quello del testo.

Q: Come aggiungo più di un'ombra al testo?

Separa le ombre con virgole: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. La prima ombra viene disegnata sopra quelle che la seguono.

Q: text-shadow ha un valore spread come box-shadow?

No. text-shadow non ha spread né la parola chiave inset. Per ispessire l'ombra intorno alle lettere, sovrapponi più ombre o usa -webkit-text-stroke per un contorno.

Text shadow CSS: sintassi, bagliore, contorno ed esempi

text-shadow disegna una o più ombre dietro il testo. Impara i quattro valori (offset x, offset y, sfocatura, colore), come sovrapporre le ombre per effetti di bagliore, contorno e 3D, e come usare un'ombra per mantenere il testo leggibile su sfondi carichi.

Questa pagina include editor eseguibili: modifica, esegui e vedi subito l'output.

Di Kevin Spektor, Cofondatore e CTO

Pubblicato il Sep 24, 2026

Come funziona text-shadow

text-shadow disegna una copia del testo dietro di esso, spostata e sfocata. Gli dai un offset orizzontale, un offset verticale, una sfocatura facoltativa e un colore.

<!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 significa 3px a destra (in senso fisico, in ogni direzione di scrittura), 3px in basso, nessuna sfocatura, ambra. La seconda ombra sfoca di 6px e usa un nero semitrasparente, la ricetta abituale per un leggero effetto di profondità.

La sintassi

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

Valore	Obbligatorio	Significato
offset-x	Sì	Un valore positivo sposta l'ombra a destra, uno negativo a sinistra
offset-y	Sì	Un valore positivo la sposta in basso, uno negativo in alto
blur-radius	No (predefinito 0)	Quanto è morbido il bordo; i valori negativi non sono validi
color	No (predefinito il colore del testo)	Può stare all'inizio o alla fine

text-shadow: none rimuove un'ombra ereditata. Cambia i valori qui sotto per vedere l'effetto di ciascuno:

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

Prova -4px -4px 0 #16a34a, 0 0 10px red e due ombre separate da una virgola.

Ombre multiple: bagliore, contorno e 3D

Le virgole sovrappongono le ombre; la prima viene disegnata sopra. Da quest'unica regola nascono tre effetti:

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

Bagliore: offset a zero, sfocatura crescente, su uno sfondo scuro.
Contorno: quattro ombre nette, una per diagonale. Funziona per contorni sottili; per un contorno più spesso e uniforme, -webkit-text-stroke: 2px #111827 (supportato da tutti i browser attuali nonostante il prefisso) disegna invece un tratto sui bordi delle lettere.
3D: una serie di ombre nette, ognuna 1px più lontana, così le lettere sembrano estruse.

Mantenere il testo leggibile su uno sfondo carico

Un testo bianco su una foto o una texture perde i contorni dove lo sfondo è chiaro. Un'ombra scura e morbida li riporta senza un riquadro visibile:

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

Un'ombra aiuta, ma non garantisce il contrasto. Per un testo lungo sopra un'immagine, aggiungi anche una sovrapposizione piena o sfumata dietro il testo.

text-shadow contro box-shadow

	text-shadow	box-shadow
Segue	La forma delle lettere	Il riquadro dell'elemento (e il suo border radius)
Valore spread	No	Sì
`inset`	No	Sì
Multiple, separate da virgole	Sì	Sì

Per le ombre su card e pulsanti, vedi box-shadow.

Errori comuni

Ombre pesanti e scure sul testo dei paragrafi. Sfocano la forma delle lettere. Tieni le ombre per titoli ed etichette brevi.
Dimenticare il secondo offset. text-shadow: 2px #000 non è valido; servono entrambi gli offset.
Una sfocatura negativa. Non è valida e l'intera dichiarazione viene scartata.
Aspettarsi che l'ombra occupi spazio. Viene solo disegnata; ombre grandi possono sovrapporsi alla riga successiva o essere tagliate da overflow: hidden.
Effetti bagliore su sfondi chiari. Un bagliore chiaro su bianco è invisibile. I bagliori hanno bisogno di uno sfondo scuro.

Domande frequenti

Qual è la sintassi di text-shadow?

text-shadow: offset-x offset-y blur-radius color;, per esempio text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. I due offset sono obbligatori; la sfocatura vale 0 per impostazione predefinita e il colore è quello del testo.

Come aggiungo più di un'ombra al testo?

Separa le ombre con virgole: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. La prima ombra viene disegnata sopra quelle che la seguono.

Come si crea un effetto bagliore sul testo?

Usa ombre senza offset e con una sfocatura, spesso più di una con sfocatura crescente: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. Su uno sfondo scuro sembra un bagliore al neon.

text-shadow ha un valore spread come box-shadow?

No. text-shadow non ha spread né la parola chiave inset. Per ispessire l'ombra intorno alle lettere, sovrapponi più ombre o usa -webkit-text-stroke per un contorno.

text-shadow influisce sul layout?

No. L'ombra viene solo disegnata; non occupa spazio e non sposta il contenuto intorno, quindi un'ombra grande può sovrapporsi agli elementi vicini.

Concetti correlati