This demo shows how to create a repeating linear gradient using the CSS3 repeating-linear-gradient()
function. The syntax of the function is:
repeating-linear-gradient(position || angle, color-stop, color-stop ...)
where position is the starting position of the gradient, angle is the angle of the
gradient across the object background, and color-stop are the colors and positions of each
color in the gradient. In order for the linear gradient to be repeated, the position of the last
color stop must lie within the object background. For example, to repeat the pattern 5 times, set
the position of the last color stop to 20%.
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 current parameter values.
Positions can be expressed in pixels or percentages.
If you omit the starting position, the gradient will start from the top and move down. Up to
five different colors can be specified. You must specify at least two color values.
Note that the repeating-linear-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.