Bulk Emailer - Working CSS Gradient Hack for Outlook 365

Outlook VML

Outlook for Windows doesn't support CSS gradients, but we can use VML.

You need to add it right after the element with the CSS gradient class:

<table class="w-full">
<tr>
<td class="bg-blue-500 bg-gradient-b-black-transparent"> (Or Inline CSS Gradient)
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="gradient" color="#0072FF" color2="#00C6FF" angle="90" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div><![endif]-->
[your overlayed HTML here]
<!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->
</td>
</tr>
</table>

As you can see, you need to set a fixed width on the <v:rect> element - it is recommended instead of using mso-width-percent: 1000;, as that is pretty buggy (especially in Outlook 2013).The width of the <v:rect> element needs to match the width of its parent element. 

Index Previous Next