# Email header design with gradients [Canonical HTML page](https://gradiently.design/guide/email-header-design) An email header is the first thing someone sees after the subject line, in an inbox you don't control. Designing it well means planning for images off, dark mode and small screens from the start. ## 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. 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](https://gradiently.design/guide/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 Email header and signature shapes. The header shares its size with a blog banner, so one design can serve both. > **Shorter is often better** On a phone, a tall header can fill the whole first screen. If your header is mostly atmosphere, consider a shorter crop so the first line of the email is visible without scrolling. ## 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 | Most brands use the hybrid: the image carries the look, the HTML carries the words. ```html
Autumn edit: new colours for the season
Our autumn colours are here. See the new range this weekend.
``` A hybrid header. The cell has a solid colour and a gradient behind the image, so blocked images still show brand colour and styled alt text. The message is repeated as live text below. ## 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 - Deep violet: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Deep teal: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Berry to coral: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Night to blue: `linear-gradient(135deg, #1e2a52 0%, #3f6fd8 100%)` Header gradients that sit well in both light and dark inboxes: deep enough not to glare at night, saturated enough to feel bright by day. 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](https://gradiently.design/guide/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](https://gradiently.design/guide/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 wide email header with a newsletter title and issue number on a deep gradient A newsletter header at 1200 by 600: masthead, issue number and one line. A wide email header announcing Sunday opening on a warm gradient 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 `bgcolor` on 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](https://gradiently.design/guide/launch-day-graphics) email. ## FAQ ### 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.