How to apply multiple css radial gradients to a single element

Question

I have the following style applied to my div element:

background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7         


        

Answer 1

Just sepereate each one with a comma.

Something like this :

background-image: url(),url(), url();

Ofcourse instead of url you can put gradient.

And all modern browsers support this feature ( meaning IE does not).

In order to make it available in IE, you can use pie.htc

Answer 2

You just list them one after the other - like this:

background: radial-gradient(top left, 
            rgb(205, 230, 235) 34%, 
            transparent 34%), 
        radial-gradient(center, 
            rgb(205, 230, 235) 34%, 
            transparent 34%);

You can see it working at http://dabblet.com/gist/2759668

Answer 3

The best way to do that is to list them in the background property. But keep in mind that the order of properties is extremely important.

background:
    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

background then -size and -repeat, otherwise it won't work. It took me something like 30 mins to get it. Hope it will be helpful for someone.

Answer 4

You have to set the value of the radial gradient to transparent in order to let the other background come through:

   background-image: radial-gradient(closest-corner at 40% 70%,#FFFFFF 0%, rgb(171,171,171),50%,transparent),
                     radial-gradient(closest-corner circle at 80% 20%, #FFFFFF 0%, rgb(171,171,171),20%,transparent),
                     radial-gradient(closest-corner circle at 10% 10%, #FFFFFF 0%,rgb(171,171,171) 25%);