title: Why is my -webkit-background-clip not working on text
body: <p>I have used background clip before on this PC and it is working on the latest version of Chrome , I have made a codepen <a href="https://codepen.io/ItsMalefis/pen/bvjyar" rel="noreferrer" title="here">here</a> so that people can see what is going wrong </p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;div class="coinOutputs"&gt;
      &lt;h2 class="coinOutputs--white"&gt;If text is &lt;span class="coinOutputs--green"&gt;green&lt;/span&gt; then you have enough of that coin to deposit it in a bank&lt;/h2&gt;
        &lt;h2 class="text coinOutputs--white"&gt;Coppers:&lt;/h2&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>.coinOutputs{
  &amp;--green{
      background: linear-gradient(to bottom right, darken(green,15) , lighten(green,15));
  }
  &amp;--white{
      background: linear-gradient(to bottom right, darken(white , 15), white);
  }
  -webkit-background-clip: text;
  color: transparent;
  </code></pre>
  
  <p>}</p>
  
  <p>I have tried in Firefox and on another PC and it is still not working so I have eliminated whether it is the browser or not. I copied the code exactly from one of my other pens so I do not know why it will not work</p>