# Arrière-plans en dégradé dans les e-mails : Gmail et Outlook

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

Les dégradés sont superbes dans un navigateur et imprévisibles dans une boîte de réception. Construisez-les par couches, et chaque lecteur verra quelque chose qui paraît voulu.

## The short version

- Un arrière-plan en dégradé dans un e-mail doit toujours être construit par couches : d’abord une couleur de fond unie, puis un dégradé CSS par-dessus, et une image ou une version VML là où les dégradés CSS ne s’affichent pas.
- Les clients de messagerie diffèrent dans leur prise en charge du CSS, et celle-ci change d’une version à l’autre : testez donc dans les boîtes que vos lecteurs utilisent vraiment.
- Outlook classique pour Windows affiche les e-mails avec Word et ignore les dégradés CSS, mais peut dessiner un dégradé simple à deux couleurs en VML.
- Le mode sombre peut modifier les couleurs du texte tout en laissant un dégradé intact : concevez donc des en-têtes qui restent lisibles si l’un ou l’autre est modifié.

Un **arrière-plan en dégradé dans un e-mail** fonctionne quand vous le construisez par couches. Tous les clients affichent une couleur de fond unie, beaucoup de clients modernes affichent aussi un dégradé CSS par-dessus, et Outlook classique pour Windows a besoin d’une forme VML ou d’une image. Soignez les couches et chaque lecteur verra quelque chose qui paraît délibéré, même si ce n’est pas le dégradé complet.

Un e-mail n’est pas un navigateur. Chaque boîte de réception supprime, réécrit ou ignore des CSS différents, et se met à jour à son propre rythme. Ce guide couvre ce qui est fiable, le code de secours, et comment garder le texte lisible quand le mode sombre s’en mêle. Pour l’illustration de l’en-tête elle-même, voir [le design d’un en-tête d’e-mail](https://gradiently.design/fr/guide/email-header-design).

## Quels clients de messagerie affichent les dégradés CSS

La prise en charge se répartit en trois groupes. Les clients fondés sur des moteurs de navigateur affichent en général fidèlement les dégradés CSS. Outlook classique pour Windows utilise Microsoft Word pour composer les e-mails et les ignore complètement. Les messageries web et les applications de téléphone se situent entre les deux : ce qu’elles conservent dépend de l’application, du type de compte et de la façon dont le CSS est écrit.

| Client | Dégradé CSS | Sur quoi compter |
| --- | --- | --- |
| Apple Mail sur Mac, iPhone et iPad | S’affiche en général | Le dégradé CSS, avec une couleur unie derrière |
| Outlook classique pour Windows | Ignoré | Une couleur unie, ou du VML pour un dégradé simple |
| Nouvel Outlook pour Windows et Outlook sur le web | Variable | Testez, et gardez une couleur unie qui ait du sens |
| Gmail sur le web et dans ses applications | Variable | Testez avec les types de compte de vos lecteurs |
| Autres messageries web et applications de téléphone | Variable | La couleur unie est la seule chose que tous les clients affichent |

Un instantané de la tendance, pas une promesse. Des tableaux de compatibilité tenus par la communauté, comme caniemail.com, suivent les détails à mesure que les clients évoluent.

> **Outlook classique et nouvel Outlook** Microsoft fait passer les utilisateurs Windows au nouvel Outlook, qui affiche les e-mails comme Outlook sur le web. De nombreuses entreprises utilisent encore l’application classique : prévoyez donc les deux pour l’instant.

## La pile de secours, en code

Placez le dégradé sur une cellule de tableau, car la mise en page en tableau est ce que tous les clients comprennent. Déclarez la couleur trois fois, de la plus ancienne à la plus récente : l’attribut `bgcolor`, puis `background-color` dans le style en ligne, puis le dégradé en `background-image`. Un client qui ne comprend pas le dégradé abandonne cette seule déclaration et garde la couleur.

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

Trois couches de couleur sur une même cellule. Des styles en ligne, car plusieurs clients suppriment ou limitent les blocs `<style>`.

Indigo vers rose: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%)`

Le dégradé du code. Sa couleur de secours, #4c1d95, est un violet profond pris au milieu du mélange : le texte blanc se lit donc sur l’un comme sur l’autre.

Choisissez la couleur de secours avec soin. C’est la version que beaucoup de lecteurs verront vraiment : elle doit donc porter un texte blanc ou sombre aussi bien que le dégradé. Prendre une couleur au milieu du mélange fonctionne en général. Vérifiez-la avec la couleur de votre texte selon les règles du [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility), 4,5:1 pour le texte courant.

## Des dégradés dans Outlook classique avec le VML

Outlook classique sous Windows comprend encore le VML, un vieux format vectoriel de Microsoft. Enveloppé dans un commentaire conditionnel que seul Outlook lit, un rectangle VML peut peindre un dégradé à deux couleurs derrière votre contenu. Tous les autres l’ignorent.

```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 dégradé VML pour Outlook classique. Donnez-lui une largeur et une hauteur fixes et prévisualisez-le dans Outlook : les angles VML ne correspondent pas aux angles CSS, la direction peut donc demander un ajustement.

Les dégradés VML sont rudimentaires : deux couleurs, des tailles fixes et peu de contrôle. Beaucoup d’équipes jugent que l’effort n’en vaut pas la peine et laissent Outlook classique afficher la couleur unie. C’est un très bon résultat si la couleur unie a été bien choisie.

## Utiliser une image plutôt qu’un dégradé CSS

L’autre voie consiste à exporter le dégradé, souvent avec le titre à l’intérieur, sous forme d’image. Tous les clients qui affichent les images l’afficheront à l’identique, et elle peut porter du grain, de la texture et du lettrage que le CSS ne sait pas rendre. En contrepartie, certains lecteurs ne voient les images qu’après les avoir autorisées, les mots de l’image ne sont pas lus par les lecteurs d’écran ni indexés par la recherche, et le fichier ajoute du poids.

- En-tête d’e-mail: 1200 × 600
- Signature d’e-mail: 600 × 200

Concevez les en-têtes en 1200 × 600 et affichez-les à 600 pixels de large, pour qu’ils restent nets sur les écrans haute densité.

### Dégradé CSS

- Le texte reste vivant, lisible et traduisible
- Presque aucun poids de fichier
- S’affiche même quand les images sont bloquées
- Exige des solutions de secours, et varie selon le client

### Image de dégradé

- Identique partout où les images se chargent
- Peut porter du grain, de la texture et du lettrage
- Mettez aussi les mots clés en texte vivant, et décrivez l’image dans le texte alternatif
- Ajoute du poids ; une forte compression JPEG provoque du banding

Un compromis courant : le dégradé en image d’arrière-plan de la cellule, avec une couleur unie assortie derrière et le titre en vrai texte par-dessus. Si vous exportez une image de dégradé, enregistrez-la en PNG ou en JPEG de haute qualité. Les dégradés doux sont exactement là où la compression se voit en rayures ; [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) explique la solution.

## Dégradés d’e-mail et mode sombre

Le mode sombre est l’endroit où les e-mails à dégradé cassent le plus souvent. Certains clients laissent vos couleurs intactes, certains n’échangent que les fonds clairs et les textes sombres, et d’autres ajustent tout. Un dégradé en `background-image` est souvent laissé tel quel alors que les couleurs du texte sont modifiées, ce qui peut mettre du texte sombre sur un dégradé sombre.

Un en-tête d’e-mail avec les mots La sélection d’automne est là en texte clair sur un dégradé sombre

Un en-tête sombre avec un texte clair change à peine en mode sombre…

Les mêmes mots d’en-tête d’e-mail en texte sombre sur un dégradé pâle

…alors qu’un en-tête pâle avec un texte sombre est ce que le mode sombre réécrit.

1. **Concevez d’abord l’en-tête en sombre** Un dégradé profond avec un texte clair est déjà ce que veut le mode sombre : les clients ont donc peu de choses à changer. Voir [le design en mode sombre](https://gradiently.design/fr/guide/dark-mode-design) pour les principes plus larges.
2. **Déclarez la prise en charge des schémas de couleurs** Ajoutez `<meta name="color-scheme" content="light dark">` et stylez une version sombre dans `@media (prefers-color-scheme: dark)` pour les clients qui la respectent.
3. **Mettez le texte en HTML vivant, pas seulement dans l’image** Le texte vivant peut être ajusté par le client ; les mots intégrés à une image ne le peuvent pas, et ils disparaissent quand les images sont désactivées.
4. **Testez dans les vraies applications** Envoyez des e-mails de test aux clients que votre liste utilise vraiment, en réglage clair et sombre, avant d’écrire à tout le monde.

Derrière tout cela se trouve un principe tiré de [placer du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) : les mots doivent se lire sur la partie la plus sombre et la plus claire de l’arrière-plan, ainsi que sur la couleur de secours. S’ils le font, l’e-mail tient, quoi que décide la boîte de réception.

## FAQ

### Les dégradés CSS fonctionnent-ils dans les e-mails ?

Dans certains clients. Apple Mail les affiche en général, Outlook classique pour Windows les ignore, et les messageries web et applications de téléphone varient : placez donc toujours une couleur de fond unie derrière le dégradé.

### Comment ajouter un arrière-plan en dégradé dans Outlook ?

Outlook classique pour Windows ignore les dégradés CSS mais peut dessiner un dégradé simple à deux couleurs avec un rectangle VML dans un commentaire conditionnel. Beaucoup d’expéditeurs le laissent simplement afficher la couleur unie de secours.

### Gmail prend-il en charge les arrière-plans en dégradé ?

Cela dépend de l’application Gmail, du type de compte et de la façon dont le CSS est écrit, et cela peut changer. Construisez le dégradé avec une couleur unie de secours et testez dans les applications Gmail que vos lecteurs utilisent.

### Quelle taille pour l’image d’en-tête d’un e-mail ?

Concevez-la en 1200 × 600 pixels et affichez-la à 600 pixels de large, pour qu’elle reste nette sur les écrans haute densité.

### Pourquoi mon en-tête d’e-mail paraît-il faux en mode sombre ?

Certains clients changent les couleurs du texte en mode sombre mais laissent intacts les images d’arrière-plan et les dégradés. Concevoir l’en-tête comme un dégradé sombre avec du texte vivant clair évite l’essentiel du problème.