This demo shows how to create a repeating radial gradient using the CSS3 repeating-radial-gradient()
function. The syntax of the function is:
repeating-radial-gradient(center, shape size, color-stop, color-stop ...)
where center is the position of the radial gradient's center, shape is the shape
of the gradient (circle or ellipse), size is the size of
the gradient from the center point, and color-stop are the colors and positions of each
color in the gradient. The last color stop must have a position value that is less than the size
of the object background for the gradient to repeat. For example if you set the last color stop
at 25%, the gradient pattern will repeat four times.
To use the demo, enter the starting position or the angle of the gradient and specify the
RGB color value and position of each color. Press the Tab key to display the change.
Positions can be expressed in pixels or percentages.
If you omit the center position, the radial gradient will be placed at the horizontal and
vertical center of the object. Up to
five different colors can be specified. You must specify at least two color values.
Note that the repeating-radial-gradient() function is supported by: Internet Explorer version 10 and higher, Opera version 11.1 and higher, Chrome version 10 and higher, Safari version 4 and higher, and Firefox version 3.6 and higher.