cssgmailhtml-emailemail-client

gmail removes all styles from <td> if it has a background gradient


I have discovered a strange issues with gmail where if my HTML email has any form of CSS3 gradient e.g:

<th style="text-align:right; font-size:14px; background:#ededed; background-image:-webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); background-image:-moz-linear-gradient(top, #ededed, #ebebeb); font-weight:bold;">

It will remove all styles from this <th>. As soon as I remove the background gradient stuff it works fine and leaves the rest of the styles in place. I have tried changing this to background: -moz-linear... all with the same effect. If gmail doesn't like it, it strips all styles from this element.

Has anybody else experienced this? Is there a solution to fix this?

I have tested the same email with Thunderbird and Mac Mail without any problems.


Solution

  • Gmail just does strange stuff with CSS in emails in general. Being that CSS support is so hit-or-miss, I'm not surprised that something as 'advanced' as a CSS3 gradient would be totally wrong.

    The other thing that you have to consider is that most email clients won't recognize a CSS gradient, so I wouldn't bother trying.

    If you want something to appear with a gradient, and you want it to show up for most email clients, you're going to have to create it as an image that is placed as content.