radial gradients in CSS3 [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 years ago.

Improve this question

I have some experience ma开发者_高级运维king 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

---

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/

---

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/

---

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.