When I use a linear-gradient on an image it shows a bunch of lines that are going across the screen as it fades to the bottom.
gradient clipping lines picture
I've tried looking this up and saw that the height shouldn't be 100% but when I changed it to what the person said it didn't change anything.
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(11, 11, 11, 0)));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(11, 11, 11,0));
This is the gradient I'm using
Hope I have this right in what you want. You can add a gradient background by adding a background-image:
background-image:linear-gradient (#520c52d9,
#00000050);
background-repeat: no-repeat;
background-size: contain;
// Or it could be
background-size: cover;
// OR
background-size: 100%;
There is much more you can do with this and I don't mind helping. Just let me know I do this a good amount. You can even put this on the text by making the Text Transparent (a bit of a jimmy rig like)