As a bit of a follow-up to our earlier post on Gmail turning your black-colored links blue, its come to our attention that in some instances where Gmail doesn’t like a CSS property, it strips it out, as well as all inline styles surrounding it. We first came across this when a customer used box-shadow to jazz up their design… Only to find that margins, padding and more were disappearing as well. In fact, the entire style="..." attribute and contents had been removed altogether.

To work around this, we tried a little trick which has previously prevented Gmail from stripping CSS from designs, namely appending properties with !important;. For example, in the box-shadow example, we suggested using:

-webkit-box-shadow: 7px 7px 5px #000000 !important;
-moz-box-shadow: 7px 7px 5px #000000 !important;
box-shadow: 7px 7px 5px #000000 !important;

The result is that while box-shadow (and vendor-specific variants) are stripped in Gmail only, the surrounding CSS styles are preserved. As you can imagine, this means the difference between the layout displaying without a nice shadow effect and the same layout falling to pieces, devoid of all CSS. Using this technique, you can also try using other gracefully-degrading CSS3 properties without fear, too.

Thanks to Lev from Russia for pointing this out to us. We’ve observed a couple of subtle changes to how Gmail renders HTML email as of late – including rather unexpectedly supporting background-image after never doing so previously. Gmail, as opaque in its workings as it is, reminds me of one of Heraclitus’ more famous teachings – nothing endures but change. Just when we thought we knew how to safely code for email, Gmail just goes ahead and overrides our CSS, or strips it out altogether.

Has Gmail noticeably changed how it displays your HTML email campaigns? Let us know about it below.

  • Aditya

    This only affects the New look version of Gmail AFAIK.. There are other fixes to the same but the one you mentioned works as well. Strangely if you change the background color to anything that is non-white it seems to work okay.

  • Jeff Doan

    I noticed this yesterday when working with text-shadow and rgba. Foolish as it is to use rgba in email, I just assumed all those that don’t support it would (as most often do with CSS) just ignore it. I was too lazy to try a non-rgba, but simply removing the call on the one table cell fixed the issue.

    So, in essence, no solution, just noting more issues.

  • JR Prospal

    I just noticed this lately, but I’ve been having trouble with applying margin-bottom to emails in Gmail. I could use padding but Outlook2007 seems to ignore padding and Entourage reads both, doubling the space.

    I had not noticed this problem in Gmail before the last update.

  • Sean

    Gmail strips out all styles when text-indent is present, event with !important:

    <td height=”5″ colspan=”2″ style=”border-bottom:1px solid #d7e3f0;font-size:0;text-indent-9999em !important;line-height:0;”>

    Do they not support text-indent at all anymore?

  • Daniel ParĂ©

    Gmail is the Internet explorer of newsletters. Seriously fuck you Google, as a newsletter designer, you make my work a living hell.

  • Bas Zero

    Today (October 5th 2015) we sent a test campaign to different mail providers, and we use table borders to separate our content blocks. These have disappeared in GMail while we can see them at all other providers…

  • Erica Melzer

    Hey, Baz! Erica here, from Campaign Monitor’s support team. Gmail can be temperamental with this kind of thing, for sure. There are a few resources that we can point you to, though.

    Here is a boilerplate for cross-client compatibility from EoA:

    If the cells are empty (and it doesn’t sound like they are) you might try adding this:

    table {

    Additionally, there is a recommendation made here on Stack Overflow that you might find helpful.

    Best of luck, Baz! Have a good one! :)

  • art3mix

    I think gmail just set a new record.
    All i wanted is to make a nice table with 9 elements in it, so 3 rows and 3 blocks in each row.
    Now the problem is that 2 of my span tags (out of 9) don’t have the same exact style as the other spans.

    <span\ style=”padding-left:2px;font-size:18px;font-weight:400;color:#4e4751;padding-top:9px”> |stag_change| </span\>`

    <span\> |stag_change| </span\>

    And 1 td don’t have the border-bottom style, but the rest DO.


Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free