radial gradients in CSS3 [closed]

I have some experience making linear gradients in CSS but I would really like to make a radial gradient similar to this image http://i.stack.imgur.com/T85xO.png

Basically a light grey radial positioned at the bottom of the element

Radial gradients are in an implementation mess right now, Safari doesn't support elliptical radial backgrounds (Webkit Nightly does, so support for Safari is coming soon). Chrome has so many versions I'm not sure about it, and IE9 doesn't support them.

So I'd say your best option is faking it through inset box shadows:

.shadow {
  height: 80px;
  box-shadow: inset 0 75px 75px #fff, 
              inset 0 50px 50px #fff,
              inset 0 20px 20px #fff,
              inset 0 5px 5px #fff;

  background: #ccc;
}

http://jsfiddle.net/nmtHf/

You can play with this tool here. Will give you the code as you generate what you want. http://www.westciv.com/tools/radialgradients/index.html

http://gradients.glrzad.com/

24 Ways covered Graidents in Depth this Year with the following article: http://24ways.org/2010/everything-you-wanted-to-know-about-gradients

Towards the bottom they spend a whole section on radial graidents and give you two articles of suggested reading:

MDN
Safari

I would suggest the tool robx posted, but if your like me, you like extra reading on understanding of how things work.

来源：https://stackoverflow.com/questions/6101692/radial-gradients-in-css3

标签

css

css3

gradient

radial