WebKit Radial Gradients (Circle gradient)

WebKit in January 2011 released new gradient syntax that is closer to w3c recommendation and Mozilla implementation.

The new syntax has four gradient functions:

  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

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.

Examples

-webkit-radial-gradient(circle, white, black);
-webkit-radial-gradient(circle, white, black);


-webkit-radial-gradient(center, 20px 20px, white, black);
-webkit-radial-gradient(center, 20px 20px, white, black);

-webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%);
-webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%);


-webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

-webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px);
-webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px);
-webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px);
-webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px);

See working demo here if you are running latest WebKit (tested on WebKit Version 5.0.3 (6533.19.4, r77734))

References