radial gradients in CSS3 [closed]

Question

I have some experience making linear gradients in CSS but I would really like to make a radial gradient similar to this image https://i.sstatic.net/T85xO.png

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

Sulfa

Answer 1

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/

Lotti

Answer 2

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/

Nullipore

+1 for that tool. Though it should be noted that it uses the old syntax for Webkit, which has since be changed to be more in line with the W3C standard recommendation - webkit.org/blog/1424/css3-gradients . It's still a good idea to use the old format to support the past couple of versions, though, but the new format should allow easier conversion from the Gecko code. – Fradin

Well, there is new and old now. I been playing with both tools to learn CSS3 gradients, and both works great. – Nullipore

@rotox - Since we're sharing tools, have you seen the one from Colorzilla (colorzilla.com/gradient-editor)? It doesn't do radial ones yet, but it's awesome for linear ones, especially for people most familiar with Photoshop. – Fradin

Answer 3

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.

Enactment

I've been through these as well. Good stuff, but if your short on time to learn then code, nothing like tools and generators to teach as you go ;) – Nullipore