How to apply multiple css radial gradients to a single element
css, html, radial-gradients
Solution
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
Problem
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