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
Comments
Post a Comment