How can I apply multiple radial-gradient properties to a single element in CSS?

Question

I have a problem in applying multiple gradient property in css.

I want to apply two radial-gradient properties into a <div> element. This is what I did.

`
...
<style>
.gradient-bg {
  background-image: radial-gradient(circle at 100% 15%, #1f3764 2%, #090915 10%), radial-gradient(circle at 0% 50%, red 2%, #090915 10%);
}
</style>

...
<div className="gradient-bg">
 <div>...</div>
</div>
}
...

`

I thought this would work, but only the first radial-gradient property was applied, and not the second one.

Answer 1

You can apply multiple radial gradients to a class by setting the value of the gradients to transparent so that the other backgrounds are visible:

.gradient-bg {
  background: 
    radial-gradient(closest-corner at 50% -10%, 
            rgba(5, 5, 5, .7), 
            transparent), 
    radial-gradient(closest-corner at 50% 110%, 
            rgba(5, 5, 5, .7), 
            transparent);
}

See this post and article for extensive examples and details of applying multiple gradients.

How to apply multiple css radial gradients to a single element

https://css-tricks.com/radial-gradient-recipes/