0

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.

Solomon
  • 1
  • 1
  • There's no transparency so only the first one (which takes precedence in background-image) can be seen. However, what do you want the result to look like? are the circles to have 'solid' edges or is there some blending to happen? – A Haworth May 25 '23 at 04:41

1 Answers1

0

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/

ionosphere
  • 373
  • 2
  • 13
  • Hi, Inosphere. Thank you for your answer. I tried again, but still it is the same. :( https://css-tricks.com/radial-gradient-recipes/ In the article above, scss is used. I want to know if it's possible in css or not. If you have experience in applying two gradients with css, please let me know, I'll appreciate. Thank you. – Solomon May 25 '23 at 09:02