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

Gessner

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

Dunford

Thanks Eric, thats exactly what I needed. cheers. Although pie.htc doesn't support radial gradients, it is a nice piece of work. – Gessner

Answer 2

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.

Lame

The background property is shorthand for: background-color, background-image, background-position, background-size background-repeat, background-origin, background-clip, background-attachment That's why in your example you had to put background-size and background-repeat after background as to override the shorthand background. If you use background-image instead of background, the order won't matter. – Dishearten

Answer 3

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

html {
  height: 100%;
  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);
}

Snowball

The link is broken. Could you make a Codepen? – Waterscape

Made it into a little snippet here. – Snowball

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

Engine

thank you, but I already do by use of the rgba value instead of just rgb. The a part is the alpha and is set to 0. The answer above was what I was looking for (i.e. separating them by a comma instead of multiple css entries) – Gessner