How to apply multiple css radial gradients to a single element

html css radial-gradients
hofnarwillie picture hofnarwillie · May 20, 2012 · Viewed 8.9k times · Source

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

eric.itzhak picture eric.itzhak · May 20, 2012

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

Related questions

Make <body> fill entire screen?

I'm using a radial gradient as the background on my webpage, like so: background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000)); It works, but when the content does not fill the whole page the gradient is cut off. How can I make …

Read More
how to make a css gradient stop after so many pixels?

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent; I have this code above and i just realized that this gradient goes from top to bottom. Is there any way to make it stop the whole gradient after 30px. …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More