This demo shows how to create a background gradient using the CSS3 repeating-radial-gradient()
function. The syntax of the function is:
repeating-radial-gradient(shape size at position, color-stop1, color-stop2 ...)
where shape is the shape of the gradient (circle or ellipse),
size is the size of the gradient as measured from the the center point, position determines
the center point, and color-stop are the colors and positions of each
color in the gradient. If no color stops are specified, the colors are even distributed across the
object background.
To use the demo, select the shape and size from the list boxes or specify the size from the
input boxes. Note that you can only select one shape/size option. Select the center position using
the drop-down list boxes or the input boxes. Once again you can only select one method of
positioning. Finally select the colors and stop position of each color. Any omitted
parameter values will assume their default values. Up to
five different colors can be specified. You must specify at least two color values. Check the colors
you want included in the repeating gradient.
In order for the radial gradient to be repeated, the position of the last
color stop must lie within the object background by setting its color-stop value to
less than 100% or the length of the gradient in pixels.