title: Gmail removes gradient from an email html body
body: <p>I'm using Amazon SES for sending emails and now I'm trying to create a template for the email &quot;body&quot;. As the title says I'm using some gradients for a better view but the problem is gmail won't show them correctly.</p>
  <p>I didn't paste all code, this is a simple example of how I'm using gradients</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;     
      &lt;style&gt;
          a {
              text-decoration: none;
          }
  
          .gradient {
              background: -webkit-linear-gradient(121.12deg, #E83448 -8.32%, #C3356E 85.14%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
          }
  
          @font-face {
              font-family: &quot;Biennale-BlackIt&quot;;
              src: url(&quot;Biennale-BlackIt.otf&quot;);
          }
  
          @font-face {
              font-family: &quot;Biennale-Regular&quot;;
              src: url(&quot;Biennale-Regular.otf&quot;);
          }
          
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style=&quot;width: 350px; height:700px;
      display: block;
      margin: 0 auto;&quot;&gt;
          &lt;div style=&quot;padding: 15px 45px 15px 45px;&quot;&gt;
              &lt;div style=&quot;margin-top: -10px;&quot;&gt;
                  &lt;h1 class=&quot;gradient&quot; style=&quot;font-size: 32px;
                      font-family: Biennale-BlackIt;&quot;&gt;
                      Hello
                  &lt;/h1&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>This is how it looks <a href="https://i.stack.imgur.com/jxyPp.png" rel="nofollow noreferrer">image1</a></p>
  <p>This is how is should look <a href="https://i.stack.imgur.com/rLiMF.png" rel="nofollow noreferrer">image2</a></p>
  <p>How can i fix that ?</p>