# Ombra del testo: quando aiuta e le alternative migliori

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

L’ombra portata è la soluzione più comune per il testo illeggibile e uno dei modi più rapidi per far sembrare un design datato. Ecco quando l’ombra è la scelta giusta e a cosa ricorrere il resto del tempo.

## The short version

- L’ombra del testo funziona meglio come stile deliberato, per esempio un’ombra netta sfalsata senza sfocatura, che come rimedio a uno scarso contrasto.
- Bagliori morbidi e aloni sfocati dietro le lettere ne sfumano i bordi e tendono a far sembrare un design dozzinale e datato.
- Un’ombra sottile e stretta è una scelta ragionevole per i sottotitoli su video in movimento, dove lo sfondo non si può controllare.
- Per rendere leggibile il testo, posizione, un velo sfumato, uno sfondo tinto e un peso più robusto di solito battono qualsiasi ombra.
- In CSS, text-shadow accetta uno scostamento orizzontale, uno verticale, un raggio di sfocatura facoltativo e un colore, e ammette più ombre separate da virgole.

L’**ombra del testo** aiuta in due situazioni: come stile deliberato, di solito un’ombra netta sfalsata di qualche pixel senza sfocatura, e come sottile bordo di sicurezza sui sottotitoli sopra un video in movimento. Come salvataggio per parole che non si leggono su una foto o un gradiente di solito fa danni: ombre morbide e bagliori sfocano proprio i bordi che l’occhio usa per riconoscere le lettere, e fanno invecchiare un design all’istante. Per la leggibilità, sposta le parole in un’area più calma, aggiungi un velo sfumato, tingi lo sfondo o scegli un peso più robusto.

## Tipi di effetto ombra del testo

| Tipo | Che aspetto ha | Verdetto |
| --- | --- | --- |
| Netta sfalsata | Una copia piena delle lettere spostata in basso a destra, senza sfocatura | Uno stile forte: retrò, giocoso, da poster |
| Ombra lunga | Molte copie sfalsate che formano un blocco diagonale | Uno stile, vicino all’estrusione 3D; usala su poche parole |
| Ombra portata leggera | Piccolo scostamento, piccola sfocatura, bassa opacità | Quasi invisibile sulla maggior parte degli schermi; spesso inutile |
| Bordo stretto per sottotitoli | Poco o nessuno scostamento, sfocatura breve, scuro | Va bene per i sottotitoli su video imprevedibili |
| Bagliore o alone morbido | Una nuvola ampia e sfocata di colore intorno a ogni lettera | Da evitare: impasta le lettere e sembra dozzinale |

Solo le prime due sono scelte di design. Le due centrali sono strumenti di servizio. L’ultima è un’abitudine da perdere.

## Quando l’ombra del testo aiuta

### Come stile netto e sfalsato

Un’ombra senza sfocatura, spostata di qualche percento dell’altezza della lettera e in un colore a contrasto preso dalla palette, è uno stile tipografico con una lunga storia su poster, confezioni e insegne. Sembra sicura di sé e un po’ nostalgica. Trattala come qualsiasi effetto: uno per design, poche parole grandi, un carattere robusto. Gli [effetti di testo](https://gradiently.design/it/guide/text-effects) la confrontano con gli altri trattamenti. Gli [effetti di testo retrò](https://gradiently.design/it/guide/retro-text-effect) mostrano i suoi cugini stretti, il doppio e la scia.

### Dietro i sottotitoli nei video

Sottotitoli e didascalie stanno sopra immagini che cambiano a ogni fotogramma, quindi non puoi scegliere un’area calma. Un’ombra stretta e scura o un contorno sottile mantiene leggibili i sottotitoli bianchi quando dietro passa una finestra luminosa. Tienila vicina alle lettere: sfocatura breve e poco o nessuno scostamento. Il [design dei sottotitoli video](https://gradiently.design/it/guide/video-captions-design) tratta dimensioni e posizione.

## Quando l’ombra del testo fa danni

Il problema di usare un’ombra per correggere il contrasto è che cura il sintomo. Lo sfondo è sempre fitto; hai solo aggiunto una macchia intorno alle lettere. I bagliori morbidi sono i peggiori, perché spargono una nuvola sfocata oltre ogni lettera e ammorbidiscono il bordo che ne definisce la forma. Sui post social si comprimono anche male, trasformandosi in fasce a chiazze.

### L’ombra come stampella

- Bagliore nero morbido su testo bianco sopra una foto
- Alone colorato intorno a un titolo
- Ombra su un testo corrente piccolo
- Diverse ombre differenti in un solo design
- Ombra più contorno più bagliore su una sola parola

### Scelta migliore

- Sposta le parole nell’area più calma
- Un velo sfumato su un bordo dell’immagine
- Caratteri più grandi e robusti per la riga piccola
- Uno stile coerente in tutto il set
- Un solo trattamento, scelto con intenzione

## Alternative migliori all’ombra del testo

1. **Sposta le parole** Trova l’area più calma e uniforme dello sfondo e mettici il testo. Questo risolve la maggior parte dei problemi prima che nascano.
2. **Aggiungi un velo sfumato** Una dissolvenza morbida dallo scuro al trasparente lungo un bordo dà contrasto senza una forma visibile. Il [testo leggibile sulle foto](https://gradiently.design/it/guide/readable-text-on-photos) ha i codici dei veli.
3. **Calma lo sfondo** Tingi una foto in uno o due colori, abbassa le sue alte luci o scegli un gradiente con una regione più quieta.
4. **Rafforza il carattere** Sali di un peso e di una dimensione. Un sans in grassetto a dimensione generosa non ha bisogno di aiuto sulla maggior parte degli sfondi.
5. **Cambia l’inchiostro** A volte il testo scuro su un’area chiara batte il testo bianco con un’ombra. Scegli l’inchiostro riga per riga, non per l’intero design.

Un post verticale con la scritta Aperti fino a tardi in cui lo sfondo scorre in modo irregolare dietro le lettere

Parole su un tratto fitto di sfondo: è il momento in cui si ricorre a un bagliore.

Lo stesso post con lettere pulite e senza ombra, sopra un’area calma del gradiente

Le stesse parole con lo sfondo calmato dietro. Nessuna ombra necessaria, e le lettere restano nitide.

Sui gradienti in particolare, il fondo spesso si schiarisce o si scurisce lungo il fotogramma, quindi un solo colore d’inchiostro non va bene per ogni riga. Il [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) mostra come pianificarlo, e il [testo su sfondi fitti](https://gradiently.design/it/guide/type-on-busy-backgrounds) tratta motivi e texture.

## L’ombra del testo in CSS

La proprietà CSS `text-shadow` accetta uno scostamento orizzontale, uno verticale, un raggio di sfocatura facoltativo e un colore. Separa più ombre con virgole; la prima indicata sta sopra. Usa le unità `em` perché l’ombra segua la dimensione del carattere. Il riferimento completo è su [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}
```

Due ombre che valgono la pena, e il velo sfumato che sostituisce tutto il resto.

I verificatori automatici di contrasto confrontano il colore del testo con quello dello sfondo e ignorano l’ombra. Se uno strumento segnala il tuo testo come a basso contrasto, un’ombra può farlo sembrare migliore sul tuo schermo ma non cambia la misura. Correggi invece lo sfondo o l’inchiostro. Il [CSS per l’ombra del testo](https://gradiently.design/it/guide/css-text-shadow) ha più ricette per il web.

## Come Gradiently gestisce la leggibilità

Gradiently è nato dall’idea che le parole non dovrebbero aver bisogno di essere salvate. Un Mark sa dove sono le parole: la sua regione più calma e più contrastata si sposta dietro il testo, i colori vicino alle lettere si scuriscono o si schiariscono e i dettagli fitti si distendono. L’inchiostro automatico sceglie poi testo chiaro o scuro per ogni riga dalla palette del Mark stesso. Non entrano in gioco riquadri, ombre né sfocature, e scegli tu quanto risponde il Mark. Se vuoi la profondità come stile, il trattamento di lettering Estrusione dà lettere profonde nei colori del Mark e Doppio disegna due volte lettere aperte, entrambi nitidi e privi di sfocatura.

## FAQ

### Devo usare un’ombra del testo per renderlo leggibile?

Di solito no. Posizione, un velo sfumato, uno sfondo più calmo o un peso più robusto rendono leggibile il testo senza sfocare le lettere.

### Che cos’è un’ombra netta sul testo?

Una copia delle lettere spostata in basso e di lato, senza sfocatura, di solito in un colore a contrasto. È uno stile deliberato che si vede su poster e confezioni.

### Come aggiungo un’ombra al testo in CSS?

Usa `text-shadow: 0.06em 0.06em 0 #9a3412;` dove i valori sono scostamento orizzontale, scostamento verticale, raggio di sfocatura e colore.

### L’ombra del testo migliora il contrasto per l’accessibilità?

I verificatori automatici confrontano il colore del testo con lo sfondo e ignorano l’ombra, quindi un’ombra non risolve un rapporto insufficiente. Correggi lo sfondo o l’inchiostro.

### Perché gli effetti di testo luminoso sembrano dozzinali?

Un bagliore sparge una nuvola sfocata intorno a ogni lettera, ammorbidendone i bordi e spesso creando bande quando l’immagine viene compressa.