Combining multiple linear gradients in one display

I'm looking to combine three linear gradients into one image background, like so: three gradients, but have not found a good way of doing so.

When I try using the linear-gradient css property with multiple elements, I am unable to provide anything other than solid elements in my css. For example, this results in just one gradient appearing:

.bg-grad {
    background: rgb(255, 255, 255);

    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(192, 204, 92, 1) 100%
        ),
        linear-gradient(
            180deg,
            rgba(120, 196, 212, 1) 0%,
            rgba(255, 255, 255, 1) 100%
        );
}

<div class="bg-grad" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus expedita doloribus ducimus nam rem, eaque tempora aliquid accusamus repellat aut error suscipit a molestiae voluptas soluta ad eius quo. Nobis tempora facere, dicta perferendis vel perspiciatis illum? 

</div>

Any help would be greatly appreciated!

from Recent Questions - Stack Overflow https://ift.tt/3Bhf6aa
https://ift.tt/eA8V8J