Is it possible to use gradients in emails?

html css linear-gradients
vijai shukla picture vijai shukla · Dec 19, 2012 · Viewed 25.5k times · Source

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

Answer

Alfo picture Alfo · Dec 19, 2012

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.

Related questions

linear-gradient background from center / middle

Is there a way to use linear-gradient background which is starting from the center / middle of the screen? This is my current css: body { display: table; width: 100%; height: 100%; margin: 0 auto; background-repeat: no-repeat; background-attachment: fixed; background-position: center top; background-size: 800px; background: …

Read More
Gradient line with dashed pattern

I need to create a dashed line with a linear gradient. I managed to create a dashed line using <hr /> and the following styling: line { border: 0px; border-bottom: 2px dashed; } And I also know that to achieve a …

Read More
HTML table cell partial background fill

I have a table that has a column that shows a % value. To make it more visually appealing, I'd like to display a linear gradient background that corresponds to the % value (e.g. 50% would fill half of the width of …

Read More