The short version
- An email gradient background should always be built in layers: a solid background colour first, a CSS gradient on top, and an image or VML version where CSS gradients don't render.
- Email clients differ in how much CSS they support, and support changes between versions, so test in the actual inboxes your readers use.
- Classic Outlook for Windows renders email with Word and ignores CSS gradients, but it can draw a simple two-colour gradient with VML.
- Dark mode can change text colours while leaving a gradient untouched, so design headers that read well if either one is altered.
On this page
An email gradient background works when you build it in layers. Every client shows a solid background colour, many modern clients also render a CSS gradient on top of it, and classic Outlook for Windows needs either a VML shape or an image. Get the layers right and each reader sees something that looks deliberate, even if it isn't the full gradient.
Email is not a browser. Each inbox strips, rewrites or ignores different CSS, and each updates on its own schedule. This guide covers what is dependable, the fallback code, and how to keep text readable when dark mode steps in. For the header artwork itself, see email header design.
Which email clients show CSS gradients
Support falls into three groups. Clients built on browser engines tend to render CSS gradients faithfully. Classic Outlook for Windows uses Microsoft Word to lay out email and ignores them entirely. Webmail and phone apps sit in between: what they keep depends on the app, the account type and how the CSS is written.
| Client | CSS gradient | What to rely on |
|---|---|---|
| Apple Mail on Mac, iPhone and iPad | Generally renders | The CSS gradient, with a solid colour behind it |
| Classic Outlook for Windows | Ignored | A solid colour, or VML for a simple gradient |
| New Outlook for Windows and Outlook on the web | Varies | Test, and keep the solid colour meaningful |
| Gmail on the web and in its apps | Varies | Test with the account types your readers use |
| Other webmail and phone apps | Varies | The solid colour is the one thing every client shows |
The fallback stack, in code
Put the gradient on a table cell, because table layout is what every client understands. Declare the colour three times, from oldest to newest: the bgcolor attribute, then background-color in the inline style, then the gradient as background-image. A client that doesn't understand the gradient drops that one declaration and keeps the colour.
<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><style> blocks.linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%)Choose the fallback with care. It is the version many readers will actually see, so it should carry white or dark text as well as the gradient does. Taking a colour from the middle of the blend usually works. Check it against your text colour with the colour contrast rules, 4.5:1 for body text.
Gradients in classic Outlook with VML
Classic Outlook on Windows still understands VML, an old Microsoft vector format. Wrapped in a conditional comment that only Outlook reads, a VML rectangle can paint a two-colour gradient behind your content. Everyone else skips it.
<!--[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 gradients are blunt: two colours, fixed sizes and limited control. Many teams decide the effort isn't worth it and let classic Outlook show the solid colour. That is a perfectly good outcome if the solid colour was chosen well.
Using an image instead of a CSS gradient
The other route is to export the gradient, often with the headline inside it, as an image. Every client that shows images will show it identically, and it can carry grain, texture and lettering that CSS can't. The trade-offs are that some readers see images only after they allow them, the words in the image can't be read by screen readers or search, and the file adds weight.
Email header
1200 × 600
Email signature
600 × 200
CSS gradient
- Text stays live, readable and translatable
- Almost no file weight
- Shows even when images are blocked
- Needs fallbacks, and varies by client
Gradient image
- Looks identical wherever images load
- Can carry grain, texture and lettering
- Put the key words in live text too, and describe the image in alt text
- Adds weight; heavy JPEG compression causes banding
A common middle path: the gradient as a background image on the cell, with a matching solid colour behind it and the headline as real text on top. If you export a gradient image, save it as PNG or a high-quality JPEG. Soft gradients are exactly where compression shows as stripes; gradient banding explains the fix.
Email gradients and dark mode
Dark mode is where gradient emails most often break. Some clients leave your colours alone, some only swap light backgrounds and dark text, and some adjust everything. A gradient in background-image is often left untouched while text colours are changed, which can put dark text on a dark gradient.
A dark header with light type barely changes in dark mode…
…while a pale header with dark type is what dark mode rewrites.
- 1
Design the header dark first
A deep gradient with light type is already what dark mode wants, so clients have little to change. See dark mode design for the broader principles.
- 2
Declare colour-scheme support
Add
<meta name="color-scheme" content="light dark">and style a dark version inside@media (prefers-color-scheme: dark)for the clients that honour it. - 3
Put text in live HTML, not only in the image
Live text can be adjusted by the client; words baked into an image can't, and they vanish when images are off.
- 4
Test in the real apps
Send test emails to the clients your list actually uses, in both light and dark settings, before you send to everyone.
Behind all of this sits one principle from putting text on a gradient: the words should read against the darkest and the lightest part of the background, and against the fallback colour. If they do, the email holds up whatever the inbox decides to do.
Questions people ask
Do CSS gradients work in email?
In some clients. Apple Mail generally renders them, classic Outlook for Windows ignores them, and webmail and phone apps vary, so always put a solid background colour behind the gradient.
How do I add a gradient background in Outlook?
Classic Outlook for Windows ignores CSS gradients but can draw a simple two-colour gradient with a VML rectangle inside a conditional comment. Many senders simply let it show the solid fallback colour.
Does Gmail support gradient backgrounds?
It depends on the Gmail app, the account type and the way the CSS is written, and it can change. Build the gradient with a solid fallback colour and test in the Gmail apps your readers use.
What size should an email header image be?
Design it at 1200 × 600 pixels and display it at 600 pixels wide, so it stays sharp on high-density screens.
Why does my email header look wrong in dark mode?
Some clients change text colours in dark mode but leave background images and gradients alone. Designing the header as a dark gradient with light live text avoids most of the problem.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
