CSS property · data last changed 10 Nov 2026
radial-gradient in email clients
Works in 10 of 21. Not supported in Outlook 365, Outlook (New), Outlook Classic and 7 more. Partial in Gmail Android.
Your reader in Outlook Classic sees the email without radial-gradient, even if it looks right where you tested it.
caniemail (MIT) via @emailens/engine 0.18.22
What to do instead in Outlook Classic
Always give the element a solid background-color first, picked from the gradient's dominant colour, and put the gradient after it. Every client that cannot draw the gradient keeps the solid colour, and text on top stays readable. If the gradient carries the design, export it as an image and set it as the background, with the same background-color underneath for when images are off. For Outlook Classic specifically, a VML <v:fill type="gradientRadial"> inside an MSO conditional is the only way to get a gradient.
- Gradients can be created in VML using
type="gradientRadial"on a<v:fill>. See VML documentation.
No signup · Five clients free, Outlook Classic included · All 21 with an account
The checker needs a computer screen.
A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →
Every account includes one free real-device check in classic Outlook, Outlook for Mac and Apple Mail, after you verify your email and run one preview, while this month's free capacity lasts. How real-device checks work →
radial-gradient is not among the 24 features we have screenshotted on real installs. The ones we have →
All 21 clients, problems first
| Client | Support |
|---|---|
| Outlook 365 | Not supported |
| Outlook (New) | Not supported |
| Outlook Classic | Not supported See caveat 2 |
| Outlook iOS | Not supported |
| Outlook Android | Not supported |
| Outlook for Mac | Not supported |
| Yahoo Mail | Not supported |
| Yahoo Mail Android | Not supported |
| Yahoo Mail iOS | Not supported |
| AOL Mail | Not supported |
| Gmail Android | Partial See caveat 1 |
Works in 10: Gmail, Gmail iOS, Apple Mail and 7 more. Show all
| Client | Support |
|---|---|
| Gmail | Works |
| Gmail iOS | Works |
| Apple Mail | Works |
| Apple Mail iOS | Works |
| Samsung Mail | Works |
| Thunderbird | Works |
| HEY Mail | Works |
| Proton Mail | Works |
| Fastmail | Works |
| Superhuman | Works |
Caveats (2)
- 1. Gmail Android: Buggy. Does not work inline in the
background-imageproperty. (See email-bugs#135) - 2. Outlook Classic: Gradients can be created in VML using
type="gradientRadial"on a<v:fill>. See VML documentation.
Caveats as recorded by caniemail (MIT), one entry per wording.
How radial-gradient behaves
radial-gradient() paints a gradient that spreads out from a point, used for glows, spotlights and soft hero backgrounds. In email it works in Gmail, Apple Mail, Samsung Email, Thunderbird, HEY, Proton Mail, Fastmail and Superhuman. No Outlook supports it, not even Outlook for Mac or Outlook 365, and neither do Yahoo Mail and AOL, so a large share of readers see whatever sits underneath it.
- Outlook Classic, Outlook (New), Outlook 365, Outlook for Mac and the Outlook mobile apps do not support radial-gradient().
- Yahoo Mail and AOL do not support it.
- Gmail for Android does not apply it when it is written inline in background-image.
- Outlook Classic can draw a radial gradient in VML, with type="gradientRadial" on a <v:fill>.
Questions
Does radial-gradient work in Outlook?
No version of Outlook supports radial-gradient(). Set a solid background-color as the fallback, or use VML with type="gradientRadial" for Outlook Classic.
Does radial-gradient work in Gmail?
Yes, on the web and on iOS. On Android it fails when written inline in background-image, so keep a solid background-color behind it.
Your next question
- Does linear-gradient work in Outlook Classic?
Works in 9 of 21 · partial in 2 · not supported in 10
advice - Does fit-content work in Outlook Classic?
Works in 11 of 21 · partial in 3 · not supported in 6 · 1 untested
- Does calc work in Outlook Classic?
Works in 8 of 21 · partial in 2 · not supported in 10 · 1 untested
- Does clamp work in Outlook Classic?
Works in 6 of 21 · partial in 3 · not supported in 11 · 1 untested
- Does conic-gradient work in Outlook Classic?
Works in 6 of 21 · partial in 1 · not supported in 13 · 1 untested
- Does max work in Outlook Classic?
Works in 6 of 21 · partial in 3 · not supported in 11 · 1 untested
Every feature in Outlook Classic · All email CSS features · What real installs show
Paste your email
Get new email CSS fixes by email.