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

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.