# Sfondi con gradiente nelle email: cosa funziona in Gmail e Outlook

[Canonical HTML page](https://gradiently.design/it/guide/gradients-in-email)

I gradienti sono bellissimi in un browser e imprevedibili in una casella di posta. Costruiscili a livelli, e ogni lettore vedrà qualcosa che sembra voluto.

## The short version

- Lo sfondo con gradiente di un’email va sempre costruito a livelli: prima un colore di sfondo pieno, poi un gradiente CSS sopra e una versione con immagine o VML dove i gradienti CSS non vengono renderizzati.
- I client di posta differiscono per quanto CSS supportano, e il supporto cambia tra una versione e l’altra, quindi prova nelle caselle che i tuoi lettori usano davvero.
- Outlook classico per Windows renderizza le email con Word e ignora i gradienti CSS, ma può disegnare un semplice gradiente a due colori con il VML.
- La modalità scura può cambiare i colori del testo lasciando intatto un gradiente, quindi progetta intestazioni che si leggano bene anche se l’uno o l’altro viene alterato.

Lo **sfondo con gradiente di un’email** funziona quando lo costruisci a livelli. Ogni client mostra un colore di sfondo pieno, molti client moderni renderizzano anche un gradiente CSS sopra di esso, e Outlook classico per Windows richiede una forma VML o un’immagine. Se i livelli sono giusti, ogni lettore vede qualcosa che sembra voluto, anche se non è il gradiente completo.

Un’email non è un browser. Ogni casella elimina, riscrive o ignora CSS diversi, e ognuna si aggiorna con i propri tempi. Questa guida tratta ciò che è affidabile, il codice di riserva e come mantenere leggibile il testo quando interviene la modalità scura. Per la grafica dell’intestazione in sé, vedi il [design delle intestazioni email](https://gradiently.design/it/guide/email-header-design).

## Quali client di posta mostrano i gradienti CSS

Il supporto si divide in tre gruppi. I client costruiti su motori di browser tendono a renderizzare fedelmente i gradienti CSS. Outlook classico per Windows usa Microsoft Word per impaginare le email e li ignora del tutto. Webmail e app per telefono stanno nel mezzo: ciò che mantengono dipende dall’app, dal tipo di account e da come è scritto il CSS.

| Client | Gradiente CSS | Su cosa contare |
| --- | --- | --- |
| Apple Mail su Mac, iPhone e iPad | In genere lo renderizza | Il gradiente CSS, con un colore pieno dietro |
| Outlook classico per Windows | Ignorato | Un colore pieno, o il VML per un gradiente semplice |
| Nuovo Outlook per Windows e Outlook sul web | Varia | Prova, e mantieni sensato il colore pieno |
| Gmail sul web e nelle sue app | Varia | Prova con i tipi di account che usano i tuoi lettori |
| Altre webmail e app per telefono | Varia | Il colore pieno è l’unica cosa che ogni client mostra |

Un’istantanea dello schema, non una promessa. Tabelle di supporto mantenute dalla comunità, come caniemail.com, seguono i dettagli man mano che i client cambiano.

> **Outlook classico e nuovo** Microsoft sta spostando gli utenti Windows sul nuovo Outlook, che renderizza le email come Outlook sul web. Molti luoghi di lavoro usano ancora l’app classica, quindi per ora pianifica per entrambi.

## Lo stack di riserva, nel codice

Metti il gradiente su una cella di tabella, perché il layout a tabelle è ciò che ogni client capisce. Dichiara il colore tre volte, dal più vecchio al più nuovo: l’attributo `bgcolor`, poi `background-color` nello stile inline, poi il gradiente come `background-image`. Un client che non capisce il gradiente scarta quella dichiarazione e mantiene il colore.

```html
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td class="hero" bgcolor="#4c1d95"
        style="background-color:#4c1d95;
               background-image:linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%);
               padding:48px 32px;">
      <h1 style="margin:0; font-family:Arial, Helvetica, sans-serif;
                 font-size:32px; line-height:40px; color:#ffffff;">
        The autumn edit is here
      </h1>
    </td>
  </tr>
</table>
```

Tre livelli di colore su una cella. Stili inline, perché diversi client rimuovono o limitano i blocchi `<style>`.

Dall’indaco al rosa: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%)`

Il gradiente del codice. La sua riserva, #4c1d95, è un viola profondo dal centro della sfumatura, così il testo bianco si legge su entrambi.

Scegli la riserva con cura. È la versione che molti lettori vedranno davvero, quindi deve reggere il testo bianco o scuro tanto bene quanto il gradiente. Prendere un colore dal centro della sfumatura di solito funziona. Verificalo con il colore del testo secondo le regole del [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility), 4,5:1 per il testo del corpo.

## Gradienti in Outlook classico con il VML

Outlook classico su Windows capisce ancora il VML, un vecchio formato vettoriale di Microsoft. Racchiuso in un commento condizionale che solo Outlook legge, un rettangolo VML può dipingere un gradiente a due colori dietro il tuo contenuto. Tutti gli altri lo saltano.

```html
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
        style="width:600px; height:240px;">
  <v:fill type="gradient" color="#1e1b4b" color2="#db2777" angle="135" />
  <v:textbox inset="0,0,0,0">
<![endif]-->

  <!-- your table cell content goes here -->

<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->
```

Un gradiente VML per Outlook classico. Dagli larghezza e altezza fisse e provalo lì: gli angoli VML non corrispondono a quelli CSS, quindi la direzione potrebbe richiedere una regolazione.

I gradienti VML sono rudimentali: due colori, dimensioni fisse e poco controllo. Molti team decidono che lo sforzo non vale e lasciano che Outlook classico mostri il colore pieno. È un ottimo risultato se il colore pieno è stato scelto bene.

## Usare un’immagine al posto di un gradiente CSS

L’altra via è esportare il gradiente, spesso con il titolo al suo interno, come immagine. Ogni client che mostra le immagini la mostrerà in modo identico, e può portare grana, texture e lettering che il CSS non può. Gli svantaggi sono che alcuni lettori vedono le immagini solo dopo averle consentite, le parole nell’immagine non possono essere lette dai lettori di schermo né dalla ricerca, e il file aggiunge peso.

- Intestazione email: 1200 × 600
- Firma email: 600 × 200

Progetta le intestazioni a 1200 × 600 e mostrale a 600 pixel di larghezza, così restano nitide sugli schermi ad alta densità.

### Gradiente CSS

- Il testo resta vivo, leggibile e traducibile
- Quasi nessun peso di file
- Si vede anche quando le immagini sono bloccate
- Richiede riserve e varia a seconda del client

### Immagine con gradiente

- Identica ovunque le immagini si carichino
- Può portare grana, texture e lettering
- Metti le parole chiave anche in testo vivo e descrivi l’immagine nel testo alternativo
- Aggiunge peso; la forte compressione JPEG causa banding

Una via di mezzo comune: il gradiente come immagine di sfondo sulla cella, con un colore pieno corrispondente dietro e il titolo come vero testo sopra. Se esporti un’immagine con gradiente, salvala in PNG o in JPEG di alta qualità. I gradienti morbidi sono proprio il punto in cui la compressione appare come strisce; il [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding) spiega la soluzione.

## Gradienti nelle email e modalità scura

La modalità scura è il punto in cui le email con gradiente si rompono più spesso. Alcuni client lasciano in pace i tuoi colori, alcuni scambiano solo gli sfondi chiari e il testo scuro, e alcuni regolano tutto. Un gradiente in `background-image` viene spesso lasciato intatto mentre i colori del testo vengono cambiati, e questo può mettere testo scuro su un gradiente scuro.

Un’intestazione email con le parole È arrivata la selezione d’autunno in testo chiaro su un gradiente scuro

Un’intestazione scura con testo chiaro cambia appena in modalità scura…

Le stesse parole dell’intestazione email in testo scuro su un gradiente chiaro

…mentre un’intestazione chiara con testo scuro è ciò che la modalità scura riscrive.

1. **Progetta prima l’intestazione scura** Un gradiente profondo con testo chiaro è già ciò che vuole la modalità scura, quindi i client hanno poco da cambiare. Vedi il [design in modalità scura](https://gradiently.design/it/guide/dark-mode-design) per i principi più generali.
2. **Dichiara il supporto degli schemi di colore** Aggiungi `<meta name="color-scheme" content="light dark">` e imposta una versione scura dentro `@media (prefers-color-scheme: dark)` per i client che la rispettano.
3. **Metti il testo in HTML vivo, non solo nell’immagine** Il testo vivo può essere regolato dal client; le parole incorporate in un’immagine no, e spariscono quando le immagini sono disattivate.
4. **Prova nelle app vere** Invia email di prova ai client che la tua lista usa davvero, con impostazioni chiare e scure, prima di inviare a tutti.

Dietro tutto questo c’è un principio da [mettere testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient): le parole devono leggersi sia sulla parte più scura sia su quella più chiara dello sfondo, e sul colore di riserva. Se è così, l’email regge qualunque cosa decida di fare la casella di posta.

## FAQ

### I gradienti CSS funzionano nelle email?

In alcuni client. Apple Mail in genere li renderizza, Outlook classico per Windows li ignora e webmail e app per telefono variano, quindi metti sempre un colore di sfondo pieno dietro il gradiente.

### Come aggiungo uno sfondo con gradiente in Outlook?

Outlook classico per Windows ignora i gradienti CSS ma può disegnare un semplice gradiente a due colori con un rettangolo VML in un commento condizionale. Molti mittenti lo lasciano semplicemente mostrare il colore pieno di riserva.

### Gmail supporta gli sfondi con gradiente?

Dipende dall’app di Gmail, dal tipo di account e da come è scritto il CSS, e può cambiare. Costruisci il gradiente con un colore pieno di riserva e prova nelle app di Gmail che usano i tuoi lettori.

### Che dimensione dovrebbe avere l’immagine di un’intestazione email?

Progettala a 1200 × 600 pixel e mostrala a 600 pixel di larghezza, così resta nitida sugli schermi ad alta densità.

### Perché l’intestazione della mia email sembra sbagliata in modalità scura?

Alcuni client cambiano i colori del testo in modalità scura ma lasciano in pace immagini di sfondo e gradienti. Progettare l’intestazione come un gradiente scuro con testo vivo chiaro evita la maggior parte del problema.