# Farbverlauf als E-Mail-Hintergrund: was in Gmail und Outlook klappt

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

Farbverläufe sehen im Browser wunderbar aus und im Posteingang unberechenbar. Bau sie in Ebenen, und jeder Leser bekommt etwas, das gewollt aussieht.

## The short version

- Ein Farbverlauf als E-Mail-Hintergrund sollte immer in Ebenen gebaut werden: zuerst eine einfarbige Hintergrundfarbe, darüber ein CSS-Verlauf und eine Bild- oder VML-Version dort, wo CSS-Verläufe nicht dargestellt werden.
- E-Mail-Programme unterstützen unterschiedlich viel CSS, und die Unterstützung ändert sich zwischen Versionen, teste also in den Postfächern, die deine Leser wirklich nutzen.
- Das klassische Outlook für Windows rendert E-Mails mit Word und ignoriert CSS-Verläufe, kann aber mit VML einen einfachen zweifarbigen Verlauf zeichnen.
- Der Dunkelmodus kann Textfarben ändern und einen Farbverlauf unangetastet lassen, gestalte Header also so, dass sie auch dann lesbar sind, wenn sich eines von beiden ändert.

Ein **Farbverlauf als E-Mail-Hintergrund** funktioniert, wenn du ihn in Ebenen baust. Jedes Programm zeigt eine einfarbige Hintergrundfarbe, viele moderne Programme rendern darüber auch einen CSS-Verlauf, und das klassische Outlook für Windows braucht entweder eine VML-Form oder ein Bild. Stimmen die Ebenen, sieht jeder Leser etwas, das bewusst gestaltet wirkt, auch wenn es nicht der volle Verlauf ist.

E-Mail ist kein Browser. Jedes Postfach entfernt, schreibt um oder ignoriert anderes CSS, und jedes aktualisiert sich nach eigenem Zeitplan. Dieser Ratgeber zeigt, worauf Verlass ist, den Fallback-Code und wie Text lesbar bleibt, wenn der Dunkelmodus eingreift. Zur Header-Grafik selbst siehe [E-Mail-Header gestalten](https://gradiently.design/de/guide/email-header-design).

## Welche E-Mail-Programme CSS-Verläufe zeigen

Die Unterstützung fällt in drei Gruppen. Programme auf Basis von Browser-Engines rendern CSS-Verläufe meist originalgetreu. Das klassische Outlook für Windows nutzt Microsoft Word für das Layout von E-Mails und ignoriert sie komplett. Webmail und Handy-Apps liegen dazwischen: Was sie behalten, hängt von der App, der Kontoart und der Schreibweise des CSS ab.

| Programm | CSS-Verlauf | Worauf du dich verlassen kannst |
| --- | --- | --- |
| Apple Mail auf Mac, iPhone und iPad | Wird meist dargestellt | Den CSS-Verlauf, mit einer Vollfarbe dahinter |
| Klassisches Outlook für Windows | Ignoriert | Eine Vollfarbe oder VML für einen einfachen Verlauf |
| Neues Outlook für Windows und Outlook im Web | Unterschiedlich | Testen und die Vollfarbe aussagekräftig halten |
| Gmail im Web und in den Apps | Unterschiedlich | Mit den Kontoarten testen, die deine Leser nutzen |
| Andere Webmail und Handy-Apps | Unterschiedlich | Die Vollfarbe ist das Einzige, was jedes Programm zeigt |

Eine Momentaufnahme des Musters, kein Versprechen. Von der Community gepflegte Tabellen wie caniemail.com verfolgen die Details, während sich Programme ändern.

> **Klassisches und neues Outlook** Microsoft stellt Windows-Nutzer auf das neue Outlook um, das E-Mails wie Outlook im Web rendert. Viele Arbeitsplätze nutzen noch die klassische App, plane also vorerst für beide.

## Der Fallback-Stapel als Code

Leg den Farbverlauf auf eine Tabellenzelle, denn Tabellenlayout versteht jedes Programm. Gib die Farbe dreimal an, von alt nach neu: das Attribut `bgcolor`, dann `background-color` im Inline-Style, dann den Verlauf als `background-image`. Ein Programm, das den Verlauf nicht versteht, verwirft nur diese eine Angabe und behält die Farbe.

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

Drei Farbebenen auf einer Zelle. Inline-Styles, weil mehrere Programme `<style>`-Blöcke entfernen oder einschränken.

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

Der Verlauf aus dem Code. Sein Fallback, #4c1d95, ist ein tiefes Violett aus der Mitte des Übergangs, weißer Text ist also auf beiden lesbar.

Wähle den Fallback mit Sorgfalt. Er ist die Version, die viele Leser tatsächlich sehen, er sollte also weißen oder dunklen Text genauso gut tragen wie der Verlauf. Eine Farbe aus der Mitte des Übergangs funktioniert meist. Prüf sie mit den Regeln zum [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility) gegen deine Textfarbe, 4,5:1 für Fließtext.

## Farbverläufe im klassischen Outlook mit VML

Das klassische Outlook unter Windows versteht noch VML, ein altes Vektorformat von Microsoft. In einen bedingten Kommentar verpackt, den nur Outlook liest, kann ein VML-Rechteck einen zweifarbigen Verlauf hinter deinen Inhalt malen. Alle anderen überspringen ihn.

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

Ein VML-Verlauf für das klassische Outlook. Gib ihm eine feste Breite und Höhe und prüf ihn dort in der Vorschau: VML-Winkel entsprechen nicht den CSS-Winkeln, die Richtung muss also eventuell angepasst werden.

VML-Verläufe sind grob: zwei Farben, feste Größen und wenig Kontrolle. Viele Teams entscheiden, dass sich der Aufwand nicht lohnt, und lassen das klassische Outlook die Vollfarbe zeigen. Das ist ein völlig gutes Ergebnis, wenn die Vollfarbe gut gewählt ist.

## Ein Bild statt eines CSS-Verlaufs

Der andere Weg ist, den Farbverlauf als Bild zu exportieren, oft mit der Überschrift darin. Jedes Programm, das Bilder zeigt, zeigt es identisch, und es kann Körnung, Textur und Schriftzüge tragen, die CSS nicht kann. Die Nachteile: Manche Leser sehen Bilder erst, wenn sie sie erlauben, die Wörter im Bild können weder Screenreader noch Suchmaschinen lesen, und die Datei macht die E-Mail schwerer.

- E-Mail-Header: 1200 × 600
- E-Mail-Signatur: 600 × 200

Gestalte Header in 1200 × 600 und zeig sie 600 Pixel breit an, damit sie auf Bildschirmen mit hoher Pixeldichte scharf bleiben.

### CSS-Verlauf

- Text bleibt live, lesbar und übersetzbar
- Fast kein Dateigewicht
- Erscheint auch, wenn Bilder blockiert sind
- Braucht Fallbacks und variiert je nach Programm

### Verlauf als Bild

- Sieht überall gleich aus, wo Bilder laden
- Kann Körnung, Textur und Schriftzüge tragen
- Setz die wichtigsten Wörter auch als Live-Text und beschreib das Bild im Alt-Text
- Macht die Mail schwerer, starke JPEG-Kompression erzeugt Banding

Ein häufiger Mittelweg: der Verlauf als Hintergrundbild auf der Zelle, mit passender Vollfarbe dahinter und der Überschrift als echtem Text darüber. Wenn du ein Verlaufsbild exportierst, speichere es als PNG oder JPEG in hoher Qualität. Gerade bei weichen Verläufen zeigt sich Kompression als Streifen, [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding) erklärt die Lösung.

## E-Mail-Farbverläufe und Dunkelmodus

Im Dunkelmodus gehen E-Mails mit Farbverlauf am häufigsten kaputt. Manche Programme lassen deine Farben in Ruhe, manche tauschen nur helle Hintergründe und dunklen Text, manche passen alles an. Ein Verlauf in `background-image` bleibt oft unangetastet, während Textfarben geändert werden, was dunklen Text auf einen dunklen Verlauf setzen kann.

Ein E-Mail-Header mit den Worten Die Herbstauswahl ist da in heller Schrift auf einem dunklen Farbverlauf

Ein dunkler Header mit heller Schrift verändert sich im Dunkelmodus kaum…

Dieselben Header-Wörter in dunkler Schrift auf einem blassen Farbverlauf

…während ein blasser Header mit dunkler Schrift genau das ist, was der Dunkelmodus umschreibt.

1. **Gestalte den Header zuerst dunkel** Ein tiefer Verlauf mit heller Schrift ist schon das, was der Dunkelmodus will, Programme haben also wenig zu ändern. Die allgemeinen Prinzipien stehen in [Dark-Mode-Design](https://gradiently.design/de/guide/dark-mode-design).
2. **Unterstützung für Farbschemata angeben** Füge `<meta name="color-scheme" content="light dark">` hinzu und gestalte eine dunkle Version in `@media (prefers-color-scheme: dark)` für die Programme, die das berücksichtigen.
3. **Text in Live-HTML, nicht nur ins Bild** Live-Text kann das Programm anpassen, in ein Bild eingebrannte Wörter nicht, und sie verschwinden, wenn Bilder aus sind.
4. **In den echten Apps testen** Schick Test-Mails an die Programme, die deine Liste tatsächlich nutzt, in hellen und dunklen Einstellungen, bevor du an alle sendest.

Hinter all dem steht ein Prinzip aus [Text auf einen Farbverlauf setzen](https://gradiently.design/de/guide/text-on-gradient): Die Wörter müssen vor dem dunkelsten und dem hellsten Teil des Hintergrunds lesbar sein und vor der Fallback-Farbe. Wenn das stimmt, hält die E-Mail, egal was das Postfach entscheidet.

## FAQ

### Funktionieren CSS-Verläufe in E-Mails?

In manchen Programmen. Apple Mail stellt sie meist dar, das klassische Outlook für Windows ignoriert sie, Webmail und Handy-Apps sind unterschiedlich, setz also immer eine einfarbige Hintergrundfarbe hinter den Verlauf.

### Wie füge ich in Outlook einen Farbverlauf als Hintergrund ein?

Das klassische Outlook für Windows ignoriert CSS-Verläufe, kann aber mit einem VML-Rechteck in einem bedingten Kommentar einen einfachen zweifarbigen Verlauf zeichnen. Viele Absender lassen es einfach die Fallback-Vollfarbe zeigen.

### Unterstützt Gmail Farbverläufe als Hintergrund?

Das hängt von der Gmail-App, der Kontoart und der Schreibweise des CSS ab und kann sich ändern. Bau den Verlauf mit einer einfarbigen Fallback-Farbe und teste in den Gmail-Apps, die deine Leser nutzen.

### Wie groß sollte ein E-Mail-Header-Bild sein?

Gestalte es in 1200 × 600 Pixeln und zeig es 600 Pixel breit an, damit es auf Bildschirmen mit hoher Pixeldichte scharf bleibt.

### Warum sieht mein E-Mail-Header im Dunkelmodus falsch aus?

Manche Programme ändern im Dunkelmodus Textfarben, lassen Hintergrundbilder und Verläufe aber unverändert. Ein Header als dunkler Verlauf mit hellem Live-Text vermeidet die meisten Probleme.