← CSS Support IndexDoes CSS
Does CSS linear-gradient() Work in HTML Email?
Creates an image consisting of a progressive transition between two or more colors along a straight line.
Quick Answer
Does linear-gradient() work in HTML email?
The CSS linear-gradient() property is supported in Gmail, Apple Mail, Thunderbird, ProtonMail, and others. It is NOT supported in Outlook (Windows), Outlook (Mac / Web), Yahoo! Mail. Always include a safe fallback for unsupported clients.
Which Email Clients Support CSS linear-gradient()?
CSS support for linear-gradient() across email clients
| Email Client | Desktop | Mobile / Web | Notes |
|---|---|---|---|
| Gmail | ✓ Yes | ✓ Yes | — |
| Outlook (Windows) | ✗ No | ? | — |
| Outlook (Mac / Web) | ✗ No | ✗ No | — |
| Apple Mail | ✓ Yes | ✓ Yes | — |
| Yahoo! Mail | ✗ No | ✗ No | — |
| Samsung Email | ? | ~ Partial | — |
| Thunderbird | ✓ Yes | ? | — |
| ProtonMail | ✓ Yes | ✓ Yes | — |
| Fastmail | ✓ Yes | ? | — |
Notes
- #1 Gradients can be created in VML using `type="gradient"` on a `<v:fill>`. See [VML documentation](https://docs.microsoft.com/en-us/windows/win32/vml/web-workshop---how-to-use-vml-on-web-pages-----fill--element#gradient-fill).
- #2 Partial. Not supported with Hotmail/Outlook accounts.
- #3 Buggy. Does not work inline in the `background-image` property. (See [email-bugs#135](https://github.com/hteumeuleu/email-bugs/issues/135))
Frequently Asked Questions
Related CSS Properties
Test Your Email Now
Paste your HTML and see how it renders in clients that don't support linear-gradient().