WebKit in January 2011 released new gradient syntax that is closer to w3c recommendation and Mozilla implementation.
The new syntax has four gradient functions:
On this post I am exploring radial implementation, radial-gradient() and repeating-radial-gradient(). Notice that there is also linear gradient which is most likely be used more often than the radial.
Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.
A gradient specified using circles is called a radial gradient. You specify a radial gradient by setting the type to radial and specifying a start inner circle and end outer circle. Each circle is specified by a center and a radius. The color values change gradually from the circumference of the inner circle outward to the circumference of the outer circle.
See working demo here if you are running latest WebKit (tested on WebKit Version 5.0.3 (6533.19.4, r77734))
- W3C Proposal for Radial Gradients: http://dev.w3.org/csswg/css3-images/#radial-gradients
- W3C Proposal for Background Position: http://www.w3.org/TR/css3-background/#the-background-position
- WebKit’s original proposal: http://webkit.org/blog/175/introducing-css-gradients/
- WebKit’s new implementation: http://webkit.org/blog/1424/css3-gradients/
- Mozilla implementation: https://developer.mozilla.org/en/Using_gradients