Transparency No longer Operating With More than one Radial Gradients?

I am looking to simulate a masks the usage of a radial gradient. What I’ve is a background div, and I would like portions of that div to transform visual throughout the scope of a circle……however I additionally need the circle to have a ramification impact (so I will be able to’t use an ordinary masks, since that will be a pointy geometric form).

So what I have completed is layered over a black div over the background div, after which for the reason that black div a radial gradient with transparency. And it really works! The background div is now visual within the clear portions of the radial gradient.

Now the issue happens when I attempt to upload another radial gradient to it in a unique place (i.e. two circles).

background: radial-gradient(circle at 25% 25%…..), radial-gradient(circle at 75% 75%)

After I do that, you could be expecting 2 circles to be exposing 2 portions of the background symbol proper? However this does not occur. Each gradients are appearing their colours, alternatively most effective the closing radial gradient has the transparency. Because of this the primary gradient isn’t revealing the background symbol.

What is the reason why at the back of this? It is not sensible. If it really works for 1, why cannot it paintings for two?

PS: Can not publish the precise code as a result of privateness problems.

View Reddit through SubzeroCola – View Supply