Why is my -webkit-background-clip not working on text

Question

I have used background clip before on this PC and it is working on the latest version of Chrome , I have made a codepen here so that people can see what is going wrong

HTML:

        <div class="coinOutputs">
    <h2 class="coinOutputs--white">If text is <span class="coinOutputs--green">green</span> then you have enough of that coin to deposit it in a bank</h2>
      <h2 class="text coinOutputs--white">Coppers:</h2>

SCSS:

.coinOutputs{
&--green{
    background: linear-gradient(to bottom right, darken(green,15) , lighten(green,15));
}
&--white{
    background: linear-gradient(to bottom right, darken(white , 15), white);
}
-webkit-background-clip: text;
color: transparent;

}

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

Answer 1

Because -webkit-background-clip: text; has to be applied to the text element not its parent.

.coinOutputs span {
  -webkit-background-clip: text;
  color: transparent;
}

.coinOutputs--green {
  background: linear-gradient(to bottom right, #003400, #00cd00);
}

.coinOutputs--white {
  background: linear-gradient(to bottom right, #d9d9d9, white);
}

<div class="coinOutputs">
  <h2 class="coinOutputs--white">If text is <span class="coinOutputs--green">green</span> then you have enough of that coin to deposit it in a bank</h2>
  <h2 class="text coinOutputs--white">Coppers:</h2>