The short version
- A standard email header image is 1200 by 600 pixels, displayed at 600 pixels wide so it stays sharp on high-density screens.
- Support for CSS gradients varies between email clients, so a gradient header is usually an image, with a solid background colour set as a fallback.
- Some email clients block images by default, so every header needs descriptive alt text and a background colour behind it.
- Dark mode can change the colours around a header but usually not inside the image, so design headers with their own background and test in both modes.
- Put important words such as offers, dates and calls to action in live HTML text below the header, not only inside the image.
On this page
Good email header design starts with the constraints of the inbox. Make the header image 1200 by 600 pixels and display it at 600 pixels wide, so it is sharp on high-density screens. Because email clients handle CSS gradients inconsistently, put the gradient inside the image and set a matching solid background colour behind it. Add descriptive alt text for readers with images off, check it in dark mode, and keep important words as live text below the image.
This guide covers sizes, image versus CSS, dark mode, weight and alt text, with HTML you can adapt. For the technical side of gradients in HTML email, see gradients in email.
Email header size
Most email layouts are around 600 pixels wide, a width that fits comfortably in desktop reading panes and scales down on phones. Export headers at twice that, 1200 by 600, and set the image's display width to 600 in the HTML. The 2:1 shape leaves room for a short headline or logo without pushing the content below the fold on phones.
Email header 1200×600
1200 × 600
Email signature 600×200
600 × 200
Blog banner 1200×600
1200 × 600
Image or CSS: how to build a gradient email header
On the web, a gradient is a line of CSS. In email it is less reliable: some clients render background-image: linear-gradient(...), others ignore it. The practical options are below.
| Approach | How it works | Trade-off |
|---|---|---|
| Image header | The gradient and any artwork baked into a 1200×600 image | Looks the same everywhere images load; words inside it vanish with images off |
| CSS gradient and live text | A table cell with a gradient background and HTML text on top | Light and accessible; falls back to a solid colour where gradients aren't supported |
| Hybrid | A gradient image for atmosphere, live text for the message below or on a solid fallback | The most robust: always readable, usually beautiful |
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#2a1b6b"
style="background-color:#2a1b6b; background-image:linear-gradient(135deg,#2a1b6b,#7c3aed);">
<img src="https://example.com/header-1200x600.jpg"
width="600" height="300"
alt="Autumn edit: new colours for the season"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
<tr>
<td style="padding:24px; font-family:Arial, sans-serif; font-size:18px; line-height:1.5; color:#1c1733;">
Our autumn colours are here. See the new range this weekend.
</td>
</tr>
</table>Designing email headers for dark mode
In dark mode, many email apps change the colours of the email around your header: white backgrounds may turn dark and dark text light. Images are usually left as they are. That creates two classic problems: a header with a white background glowing like a light box in a dark inbox, and a transparent logo in dark ink disappearing against a newly dark background.
Avoid
- Headers with a pure white background
- Transparent PNG logos in dark ink
- Important words only inside the image
- Thin light text on a pale gradient
Do
- A header with its own mid or deep background
- Logos on a solid shape, or a light and dark version
- The message repeated as live text
- Strong contrast within the image itself
Mid-to-deep gradients like these are the safest choice. They don't glare in a dark inbox, and white text inside them stays readable in both modes. Dark mode design covers the wider principles.
Weight, alt text and the words that matter
Keep header images light: export JPEG for photographic or grainy gradients and PNG for flat graphics with text, and compress them. Big smooth gradients can band when compressed hard, and a little grain in the design helps them survive; see gradient banding.
Write alt text that says what the header says, not what it looks like: Autumn edit: new colours for the season, not purple banner. Style the image's font properties so the alt text appears in a readable size and colour on the fallback background when images are off.
A newsletter header at 1200 by 600: masthead, issue number and one line.
An announcement header: the message is short enough to repeat as live text below.
Email header checklist
- 1
Design at 1200 by 600
Display at 600 wide. Keep words large enough to read on a phone at that size.
- 2
Give it its own background
No pure white and no transparency around the edges, so dark mode can't turn it into a light box.
- 3
Set a fallback colour
A
bgcoloron the cell in a colour from the gradient, so blocked images still look on-brand. - 4
Write real alt text
The message, not a description of the picture.
- 5
Repeat the message live
Dates, offers and calls to action as HTML text below the header.
- 6
Test in both modes
Send test emails to the apps your readers use, in light and dark mode, with images on and off.
In Gradiently, the Email header (1200 by 600) and signature (600 by 200) sizes are built in, and copy to sizes turns a finished social post into a matching header for your launch day email.
Questions people ask
What size should an email header be?
1200 by 600 pixels, displayed at 600 pixels wide in the email's HTML. The double resolution keeps it sharp on high-density screens.
Do CSS gradients work in email?
In some email clients, not all. Put the gradient in an image or use CSS with a solid bgcolor fallback, and test in the apps your readers use.
How do I make an email header work in dark mode?
Give the header its own mid or deep background rather than white or transparent, keep strong contrast inside the image, and repeat important words as live text.
What should the alt text for an email header say?
What the header says, such as the headline or offer, so readers with images blocked still get the message.
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
