Search code examples
htmlcsshtml-emailinline-styles

Inline CSS is partially working in Gmail after triggering test mail

I'm in the middle of applying inline CSS-styling to HTML for email and I'm encountering a problem that when I send a test mail, the CSS-styling partially works. Does anyone know how I can fix this problem?

Steps to reproduce:

Step 1 - applying CSS-styling to HTML in an inline way (see code below).

<div class=" product-items" style="max-width: 600px;">
<div class="button-div" style="margin-bottom: 45px; text-align: center;">
   <a href="#" style="background: #F26E11; padding: 13px 24px 14px; box-shadow: 16px 20px 10px rgba(0, 0, 0, 0.01), 9px 12px 9px rgba(0, 0, 0, 0.05), 4px 5px 6px rgba(0, 0, 0, 0.09), 1px 1px 4px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); border-radius: 15px; margin: auto; color:#FFF; text-decoration: none;">
   <span>Bestelling afmaken</span>
   <span class="arrow-icon" style="background: #F9B788; border-radius: 50%; padding: 1px 3px;">
   <img src="//app.squeezely.tech/uploads/prod/personalization/63c01436e8098.png">
   </span>
   </a>
</div>
<table align="center" class="mcnTable product-item" border="0" cellpadding="0" cellspacing="0" width="288" style="margin-top: 10px;  background: #F9F9F9; box-shadow: 9px 22px 10px rgb(51 33 42 / 2%), 5px 13px 8px rgb(51 33 42 / 5%), 2px 6px 6px rgb(51 33 42 / 9%), 1px 1px 3px rgb(51 33 42 / 10%), 0px 0px 0px rgb(51 33 42 / 10%); border-radius: 10px;">

Result:

It should look like this

enter image description here

but the actual result is:

enter image description here

When inspecting on chrome-console some inline styling seems to be removed, for example: table-tag:

enter image description here

Does anyone have some advice of how I can able to solve this issue?

Solution

  • Gmail doesn’t support box-shadow (see Can I email for details). It should by default only remove the box-shadow property. But in the case of your <table> tag, you’re using a slash notation (rgb(51 33 42 / 2%)). This makes Gmail’s parser go absolutely berserk and remove the entire corresponding inline style attribute. (You can read more about this specific issue here.) In that case, it’s safer to not use this slash notation (and preferably use an hexadecimal color).