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
| Client | Support |
|---|---|
| Gmail | Supported |
| Gmail Android | Partial |
| Gmail iOS | Supported |
| Outlook 365 | Unsupported |
| Outlook (New) | Unsupported |
| Outlook iOS | Unsupported |
| Outlook Android | Unsupported |
| Apple Mail | Supported |
| Apple Mail iOS | Supported |
| Yahoo Mail | Unsupported |
| Samsung Mail | Partial |
| Thunderbird | Supported |
| HEY Mail | Supported |
| Superhuman | Supported |
Related Features
Test your email across all 15 clients
Preview rendering, catch CSS issues, and get actionable fixes — free.
Try Emailens Free