title: Why my -webkit-background-clip: text ; is not working
body: <p>I m tring to make an animation for text with gradient but my -webkit-background-clip:text; is not working please check whats the issue here:</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-css lang-css prettyprint-override"><code>h2{
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 10%;
      top: 10%;
      font-size: 150%;
      font-weight: 800;
      color: white;
      width: 10%;
      height: 20%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 400%;
      background: linear-gradient( to right bottom, rgba(255,255,255,.9), rgba(255,30,80,1) 130%);
      animation: animate 10s linear infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myname"&gt;
                  &lt;h2&gt;Priyanshu Kumar&lt;/h2&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>