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), rgba(0, 0, 0, 0) 100%);

This has the desired effect (being an inner drop shadow only at the top of the div). I would like to apply the same effect at the bottom of the div. The following line does it well, but it seems to override the first, so I can only get one or the other.

background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);

Can someone show me how I can have multiple radial gradient backgrounds per element? I notice that webkit can do this easily, but I'm looking for a cross browser implementation/alternative.

Thanks

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%);