title: Linear gradient is not working in Outlook
body: <p>I know this is a very basic question but I have tried many StackOverflow solutions but nothing worked for me.</p>
  
  <p>This is the HTML content which I am using.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;style&gt;
    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 */
    }
  &lt;/style&gt;
  &lt;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 */"&gt;
    &lt;p&gt;This is heading&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is working on Gmail but not in Outlook.</p>
  
  <p>Screenshot of the Gmail</p>
  
  <p><a href="https://i.stack.imgur.com/qrpes.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qrpes.png" alt="enter image description here"></a></p>
  
  <p>Screenshot of the Outlook</p>
  
  <p><a href="https://i.stack.imgur.com/V2Kt1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/V2Kt1.png" alt="enter image description here"></a></p>
  
  <p>Please correct me what I am doing wrong.</p>