Is it possible to use gradients in emails?

Question

Is it possible to use gradients on elements in newsletter emails, using CSS? Is the full property supported?

Answer 1

In short, no.

Email clients very rarely support HTML5 or CSS3, and so it will break in any clients that don't.

You could always have a fallback, but the load time won't change too much, and adding CSS3 simply adds more code to keep track of.

I would recommend using image tags and hosting the images on your server, and that's if you really have to use gradients at all.

With email, generally the simpler the better. Personally, I prefer recieving plain text.

Answer 2

FWIW, here's my go-to resource for CSS support in email: https://www.campaignmonitor.com/css/

It doesn't have specific info for background gradients, and since this falls under the background-image property. My hunch would be that there's inconsistent, if any, support amongst email clients as it is a fairly feature to CSS. My only hesitation is that I think a background gradient is treated as background-image, which seems to have decent support except for Outlook.

Answer 3

Support for CSS gradients has improved nowadays in email clients, something like this will work in the majority:

background-image: linear-gradient(to top, rgba(0, 0, 0, 0), transparent);

Outlook on Windows doesn't support that, but you can use VML (Vector Markup Language) to make it work there too, i.e.:

<!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
  <v:fill type="gradient" color="#0072FF" color2="#00C6FF" angle="90" />
  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">            
  <div><![endif]-->
  Text over gradient
<!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->

I wrote a guide on gradients in email for the Maizzle framework, it also shows how to do body background gradients in Outlook, and a few other tips.