CSS styling not working in Desktop Outlook

[Marcus Roworth]

I have found a few questions which have helped point me in the right direction, but I am still unable to fully confirm an answer. The email should display like this:

I have written some CSS to help style my email notification:

<div style="padding: 10px; text-align: center; background-color: #0a6d36; background-image: linear-gradient(75deg, #0A6D36, #ADCA35);"><span style="color: #ffffff;"><strong>My amazing title!</strong><br /><br /></span></div>
<p>&nbsp;</p>

In Web Outlook, this displays as I would expect (correct padding, etc.) But it doesn't show the colour gradient - it is just solid green.

In Desktop Outlook, it has no padding and doesn't show the colour gradient (it is just the text with a solid green box fitting tightly around it).

I also tried using <style> tags in the body, but this had the same result. So I am finding no luck! Any help would be greatly appreciated. Is padding and linear-gradient not supported in Outlook. If so, is there a workaround (other than taking a screenshot of the gradient I like...)

I have used this source to try and help, but it hasn't fully answered my question: https://www.campaignmonitor.com/css/color-background/background-image/

[Sonali Nimbalk1]

Hi @Marcus Roworth ,

Unfortunately, Outlook does not support linear-gradients. Outlook, especially for Windows, primarily supports basic CSS.

Avoid them whenever possible, but whenever required you can use background png for gradients. Gradients have very limited support from clients. Use https://backgrounds.cm/ to generate the needed HTML/VML for the background

Please refer below link as well:

https://www.talentica.com/blogs/solve-3-most-irritating-outlook-email-rendering-issues/

Please hit like and mark my response as correct if that helps
Regards,
Sonali Nimbalkar

[Marcus Roworth]

@Sonali Nimbalk1 Thanks! Any advice on my padding problem? This is Desktop Outlook vs. Web Outlook:

[Sonali Nimbalk1 · Accepted solution]

@Marcus Roworth,

To resolve this issue, you can use a filled rectangle in a table cell to create the padding around the text in the button in Outlook.

The filled rectangle only works in Outlook, so it needs to be put in an Outlook conditional comment (if mso).  The a tag is included in the table cell but outside the Outlook conditional comment so that the button is shown in other email platforms.

Please refer below link for same.

https://howardsimpson.blogspot.com/2022/02/padding-not-showing-on-html-buttons-in-outlook.html#:~:te....

Please hit like and mark my response as correct if that helps
Regards,
Sonali Nimbalkar