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

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.

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.

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.

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

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

<!--[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]-->

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

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

1. 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.

2. 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. 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. 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: 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.