Skip to main content

linear-gradient in Outlook Classic

UnsupportedMicrosoft Word · desktop

Fix & Workaround

Add a solid background-color fallback before the gradient.

Before

<td style="background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>

After

<!--[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="#667eea" color2="#764ba2"
    angle="135" />
  <v:textbox inset="0,0,0,0">
<![endif]-->
<td style="background-color: #667eea;
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 40px; color: #fff;">
  Content here
</td>
<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->

Use VML to render gradients in Outlook

Other Clients

ClientSupport
GmailSupported
Gmail AndroidPartial
Gmail iOSSupported
Outlook 365Unsupported
Outlook (New)Unsupported
Outlook iOSUnsupported
Outlook AndroidUnsupported
Apple MailSupported
Apple Mail iOSSupported
Yahoo MailUnsupported
Samsung MailPartial
ThunderbirdSupported
HEY MailSupported
SuperhumanSupported

Related Features

Test your email across all 15 clients

Preview rendering, catch CSS issues, and get actionable fixes — free.

Try Emailens Free