CSS gradient without bleeding through text

Question

I am trying to create a background gradient but it bleeds through the text. I've done some googling and haven't been able to find something useful. I'm not the best at css and I've also never had to do something like this before. Any help is appreciated!

Putting the gradient as a background on the h1 tag doesn't work because as the screen grows the h1 grows with it and will distort the gradient.

Actual

Expected

Answer 1

adding z-index: -1 to my :before pseudo element gave me the desired result