CODEWITHSUNDEEP
html
Chad Harrison
Chad Harrison

Reputation: 2858

Are color gradients possible in regular HTML?

I'm looking for a way to get a color gradient within a cell in a table. I found a couple examples examples online that involve CSS or Javascript, but trying to stay away from those.

For example, I found this:

<table style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">

The `Mircorosft" scares a bit for compatibility. This is for email marketing, so it needs to be as simple as possible because email clients are rather limitted in rendering html. Any suggestions?

Upvotes: 1

Views: 102

Answers (4)

secretformula
secretformula

Reputation: 6432

No, there is no universal solution that will work on email clients. Your best bet is to use a pregenerated background image but now days most clients block images by default

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

Email clients are the worst in terms of rendering your HTML and CSS, so try to be as minimalistic as you can. The CSS gradients won't work in 90% of clients, so avoid it.

The best solution probably to put a solid background color (so it will be shown before the images are loaded, if loaded) and add a background image.

Upvotes: 1

Boris Ivanov
Boris Ivanov

Reputation: 4254

I would put background pictures. This will make sure email client will show it.

Upvotes: 0

Ben Clayton
Ben Clayton

Reputation: 82209

Check out CSS3 gradients. There are lots of generators on the web to try out, such as this one. http://gradients.glrzad.com/

In terms of browser compatibility, this table will show you the way:

http://caniuse.com/#feat=css-gradients

Upvotes: 0

Related Questions