# CSS text shadow: sintassi, esempi e alternative migliori

[Canonical HTML page](https://gradiently.design/it/guide/css-text-shadow)

text-shadow è una proprietà piccola con la fama di salvare i titoli illeggibili. Funziona meglio come decorazione che come salvataggio. Ecco la sintassi, qualche stile da copiare e cosa usare quando il vero problema è la leggibilità.

## The short version

- La proprietà CSS text shadow richiede uno scostamento orizzontale, uno verticale, un raggio di sfocatura facoltativo e un colore.
- Su uno stesso testo si possono sovrapporre più ombre separandole con virgole, e la prima dell’elenco è disegnata in cima.
- A differenza di box-shadow, text-shadow non ha un valore di diffusione né la parola chiave inset.
- Le ombre nette con scostamento e senza sfocatura sono lo stile decorativo più utile, dai titoli retrò alle lunghe ombre.
- Un’ombra scura e morbida è un rimedio debole per il testo su un’immagine affollata; uno scrim, un’immagine più scura o uno sfondo più calmo fanno il lavoro come si deve.

Una **text shadow in CSS** si scrive `text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4)`: uno scostamento orizzontale, uno verticale, un raggio di sfocatura facoltativo e un colore. Separa più ombre con virgole per sovrapporle. È ottima per effetti decorativi come titoli con scostamento netto, lunghe ombre e finti contorni. È uno strumento povero per rendere leggibile il testo su una foto affollata, e le alternative migliori sono più sotto.

## Sintassi di text-shadow

```css
/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }

/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }

/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }

/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }

/* Remove an inherited shadow */
h1 { text-shadow: none; }
```

La grammatica completa in cinque righe. Le lunghezze possono essere negative per gettare l’ombra in alto o a sinistra.

| Parte | Obbligatoria | Cosa fa |
| --- | --- | --- |
| Scostamento orizzontale | Sì | Positivo sposta l’ombra a destra, negativo a sinistra |
| Scostamento verticale | Sì | Positivo la sposta in basso, negativo in alto |
| Raggio di sfocatura | No | Predefinito 0, un bordo netto. Non può essere negativo |
| Colore | No | Predefinito il colore del testo, `currentcolor` |

Qui non c’è diffusione né `inset`. Appartengono a [box-shadow](https://gradiently.design/it/guide/css-box-shadow), che ombreggia il box dell’elemento e non le sue lettere.

L’ombra è disegnata dietro il testo e prende la forma di ogni glifo, comprese sottolineature e decorazioni. Non cambia il layout: un grande scostamento può uscire dall’elemento e sovrapporsi ai vicini senza spingerli via, quindi lascia spazio con il padding se l’ombra è grande.

## Esempi di text shadow da copiare

Gli stili che reggono sono quelli dai bordi netti. Un’ombra senza sfocatura si legge come una scelta grafica voluta; una sfocatura grigia e morbida sotto il testo corrente tende a sembrare un errore.

```css
/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }

/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }

/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }

/* 4. Long shadow: many 1px steps */
.long {
  color: #fef3c7;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
    4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
    7px 7px 0 #b45309, 8px 8px 0 #b45309;
}

/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }
```

Cinque stili che funzionano. La lunga ombra è solo la stessa ombra netta ripetuta, ogni volta un pixel più in là.

Scostamenti retrò e lunghe ombre sono trattati in modo visivo in [effetti testo retrò](https://gradiently.design/it/guide/retro-text-effect) e [effetti testo 3D](https://gradiently.design/it/guide/3d-text-effect). Per un contorno pulito, preferisci `-webkit-text-stroke` con `paint-order: stroke fill` al vecchio trucco delle quattro ombre ai quattro angoli, che lascia vuoti sulle curve; [testo con contorno](https://gradiently.design/it/guide/outline-text) mostra entrambi.

- Lettere indaco: #1e1b4b
- Scostamento rosa: #f472b6
- Lettere crema: #fff7ed
- Primo passo arancione: #f97316
- Secondo passo ruggine: #7c2d12

I colori dietro gli esempi retrò e a doppio scostamento. Le ombre con scostamento funzionano meglio quando il loro colore è chiaramente diverso da quello delle lettere, non una copia più scura.

## Perché un’ombra morbida è un rimedio debole alla leggibilità

L’uso più comune di `text-shadow` è una sfocatura scura dietro testo bianco su una foto, nella speranza di separare i due. Aiuta un poco ai bordi di ogni lettera e non fa nulla per lo spazio al loro interno, dove la foto resta visibile a piena forza. Se alzi sfocatura e opacità finché funziona, ottieni una macchia intorno a ogni parola. Gli aloni attorno al testo, chiari o scuri, sembrano datati e falliscono comunque nelle parti più luminose dell’immagine.

Anche i verificatori di contrasto ignorano le ombre. Misurano il colore del testo contro il colore dello sfondo, quindi un titolo che passa solo grazie all’ombra verrà segnalato in un audit, e a ragione. Le soglie sono in [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility).

### L’ombra come stampella

- Alone nero sfocato dietro testo bianco
- Fallisce dove l’immagine è più luminosa
- Gli strumenti di contrasto segnalano comunque un errore
- Bordi impastati sul testo piccolo

### Correggi lo sfondo

- Uno scrim a gradiente sotto le parole
- Scurisci o desatura l’immagine
- Sposta il testo nella zona più calma
- Scegli uno sfondo pensato per reggere le parole

## Alternative migliori per testo su immagini e gradienti

Uno scrim è un gradiente che scurisce solo la parte dell’immagine dietro il testo, svanendo nel nulla altrove. Mantiene luminosa la foto dove conta e dà a ogni lettera lo stesso fondo calmo. [Overlay a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-overlay) tratta tutta la sovrapposizione dei livelli.

Scrim inferiore per didascalie: `linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%)`

Scuro in basso, trasparente a due terzi dell’altezza. Sovrapponilo a una foto e posiziona le didascalie nel terzo inferiore.

```css
.card {
  background-image:
    linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}
```

Lo scrim come livello di sfondo superiore, la foto sotto. Nessuna ombra necessaria sul testo.

Altre opzioni affidabili: passa l’immagine in `filter: brightness(0.75)` su un livello a parte, ritaglia in modo che le parole cadano su cielo o muro invece che sui dettagli, oppure metti il testo su una fascia piena. [Testo sulle immagini](https://gradiently.design/it/guide/text-over-image) le spiega una per una con esempi.

Un post verticale con un titolo color crema che attraversa una chiazza luminosa del gradiente e perde contrasto

Parole chiare sulla parte più luminosa dello sfondo. Un’ombra sfocherebbe soltanto il problema.

Lo stesso post verticale con il gradiente che si approfondisce dietro il titolo, che si legge chiaramente

Qui è lo sfondo ad approfondirsi dietro la riga, così le parole si leggono senza alcun effetto su di loro.

È esattamente il lavoro che i Mark di Gradiently fanno da soli: la zona più calma si sposta dietro le tue parole e Inchiostro automatico sceglie il testo chiaro o scuro riga per riga, senza ombre, riquadri o sfocature. Quando vuoi l’ombra come decorazione e non come riparazione, i suoi trattamenti per le lettere come Estrusione, Doppio e Scia ti danno stili con scostamento senza scrivere una sola ombra.

## Text shadow sul testo a gradiente

Il testo a gradiente si fa con `background-clip: text` e un colore di testo trasparente. Aggiungi una `text-shadow` e l’ombra si vede direttamente attraverso le lettere trasparenti, impastando il gradiente dall’interno. La soluzione è ombreggiare l’elemento: `filter: drop-shadow(3px 3px 0 #1e1b4b)` segue la forma disegnata delle lettere e sta dietro di loro. La tecnica in sé è trattata in [testo a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-text).

> **Un’ombra per ogni drop-shadow()** `drop-shadow()` accetta un’ombra per funzione, ma puoi concatenarne diverse: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Ognuna ombreggia il risultato della precedente.

## Prestazioni e animazione

Le ombre nette costano poco. Raggi di sfocatura grandi su lunghi passaggi di testo costano di più da disegnare, e animare `text-shadow` ridisegna il testo a ogni fotogramma. Se vuoi animare un titolo, spostalo con `transform` e tieni ferma l’ombra.

## FAQ

### Qual è la sintassi di text-shadow in CSS?

`text-shadow: offset-x offset-y blur-radius color`, per esempio `2px 2px 4px #000`. Sono obbligatori solo i due scostamenti.

### Posso aggiungere più di una text shadow?

Sì. Separa le ombre con virgole. La prima dell’elenco è disegnata sopra le altre.

### text-shadow ha un valore di diffusione?

No. La diffusione e `inset` esistono solo su `box-shadow`. Per ispessire un’ombra del testo, sovrapponi più ombre con piccoli scostamenti.

### text-shadow migliora l’accessibilità?

Non in modo affidabile. I controlli di contrasto ignorano le ombre, quindi il testo deve raggiungere il contrasto richiesto con il suo sfondo anche senza.

### Come rendo leggibile il testo bianco su una foto senza text-shadow?

Sovrapponi uno scrim scuro a gradiente dietro l’area del testo, scurisci l’immagine, oppure metti le parole su una zona calma della foto.