Search code examples
cssgradientradial

radial gradients in CSS3

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

Solution

  • 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/