I have a test HTML document along with an external style sheet that I’m tweaking to test out how I want my collection of webpages to look. I’m trying out adding gradients on top of each other within the background, but it’s not working.

You can see in the attached image that I have one solid and opaque gradient in the back, using the background-image property on the body. However, when I add another, transparent-to-opaque gradient on top of it, the alpha channel stops working, and it makes a white fade instead, layered directly on top of it.

I need some way to use div tags presumably to stop the gradients from taking priority from each other. How would I go about doing this so that I can see the second gradient in the background on top of the other one? Using two classes in the same tag works for getting two gradients working, but I for some reason could not get it to work with the background. Please let me know how I could go about this. I check discord more often than here, so message me on there if you would like (littlehollow345).

Split-screen example of my issue. Gradient is not overlaying properly.