This demo shows how to create a background gradient using the CSS3 repeating-linear-gradient()
function. The syntax of the function is:
repeating-linear-gradient(direction, color-stop1, color-stop2 ...)
where direction is the direction of the gradient expressed either as an angle or the
keywords:
to [left | right] || [top | bottom]
To use the demo, enter the direction and select each color and then the color stop for each color.
Enter the color stop value and then use the list arrow to select either px or %. Click the check
box next to each color you want included in the gradient. If you omit the direction, the gradient
will start from the top and move down. If you omit the color stops, the colors will be evenly
spaced across the background. Up to five different colors can be specified. You must specify at
least two color values.
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%.