Gradient background for email
Many email apps ignore CSS gradients, so a gradient in an email is safest as an image. This one starts as a 1200 × 400 PNG banner, which you show at 600 × 200 in your template so it stays sharp on high-resolution screens.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
- Email clients that support linear-gradient()
- About 60% of those Can I email tracks (55.81% full, 4.65% partial)
- Source: caniemail.com, checked 2026-11
- Outlook
- Not supported on Windows, Mac, iOS, Android or Outlook.com; Outlook for Windows can draw VML gradients instead
- Source: caniemail.com, checked 2026-11
- Gmail
- Supported, except on Android, where it doesn't work inline in background-image
- Source: caniemail.com, checked 2026-11
Want a page that already looks finished?
A free Liite page comes with 15 themes, from soft sunset tones to plain black and white, plus gradient and pattern wallpapers of your own. Pick one, add your links, and your page is live at liite.co/yourname.
Gradient background for email: what to know
This page starts the background generator for this case. For every option and how to use it, see the background generator.
Putting the PNG in your email
Add the PNG as an ordinary image, set its width to half its pixel width (600 for this one) and write short alt text. Images reach far more inboxes than CSS gradients do, though some apps hide images until the reader allows them.
Set a background colour on the cell behind the image, close to the gradient's middle colour. If the image is blocked or slow, the reader still sees the right colour, not a white gap.
Questions
Why doesn't my CSS gradient show in Outlook?
Outlook doesn't support linear-gradient() on any platform Can I email has tested. Use a PNG of the gradient instead, with a solid background colour as a fallback.
What size should an email gradient be?
Twice the size you display it at. For a header shown 600 pixels wide, make the PNG 1200 pixels wide, so it looks sharp on high-resolution phones and laptops.