I know this is a very basic question but I have tried many StackOverflow solutions but nothing worked for me.
This is the HTML content which I am using.
<html>
<style>
div:after {
content: "\A";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(216, 38, 38, 0.7)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
/* W3C */
}
</style>
<div style="background:rgba(0,0,0,0.5);background:-moz-linear-gradient(top,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%);background: rgba(0,0,0,0.5);background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ *//* background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); */ /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(216, 30, 30, 0.7) 100%); /* W3C */">
<p>This is heading</p>
</div>
</html>
It is working on Gmail but not in Outlook.
Screenshot of the Gmail
Screenshot of the Outlook
Please correct me what I am doing wrong.
Unfortunately, Outlook does not support linear-gradients. Outlook, especially for Windows, primarily supports basic CSS.
See Campaign monitor: https://www.campaignmonitor.com/css/color-background/css-gradients/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With