Repeating gradients

Gradients can be transformed into repeating gradients. This page explains and tests.

The basics of transforming a non-repeating gradient into a repeating one are:

• Add repeating- to the property name.
• Make sure that the color-stops don’t fill up all of the available space, and repeat at least one of them.

This page uses radial gradients as an example, but linear gradients work exactly the same.

background: -webkit-repeating-radial-gradient(top left,red,yellow,green);
background: repeating-radial-gradient(at top left,red,yellow,green);

Even though we use a repeating-radial-gradient here, the color-stops still are red 0%, yellow 50%, and green 100%. The result is the same as if we’d used a radial-gradient.

New syntax

Middle syntax

background: -webkit-repeating-radial-gradient(top left,red,yellow 20%,green 40%);
background: repeating-radial-gradient(at top left,red,yellow 20%,green 40%);

Now we set yellow to 20% and green to 40%, which means that 60% remains. This is filled with a repeat of the colors, but note that there is a sharp break between the green and the second red, and no smooth gradient.

New syntax

Middle syntax

background: -webkit-repeating-radial-gradient(top left,red,yellow 20%,green 40%,red);
background: repeating-radial-gradient(at top left,red,yellow 20%,green 40%,red);

Repeating red at the end changes the gradient again to a normal linear one, where red fills up the space left by the other colors. We’re still not where we want to be.

New syntax

Middle syntax

background: -webkit-repeating-radial-gradient(top left,red,yellow 20%,green 40%,red 60%);
background: repeating-radial-gradient(at top left,red,yellow 20%,green 40%,red 60%);

Now that we add red 60% we have a true repeating-radial-gradient. The last color is the same as the first and it stops before the space has been filled. This causes the browser to assume that you want all colors repeated. This is what happens, and with a nice gradient effect.

New syntax

Middle syntax

background: -webkit-repeating-radial-gradient(top left,red,yellow 50px,green 100px,red);
background: repeating-radial-gradient(at top left,red,yellow 50px,green 100px,red);

All this can also be done with px (or ems or whatever) as units.

New syntax

Middle syntax

background: -webkit-repeating-radial-gradient(top left,red,yellow 50px,green 100px,red 150px);
background: repeating-radial-gradient(at top left,red,yellow 50px,green 100px,red 150px);

Still, the last color must also have a stop, just as in the percentual example.

New syntax

Middle syntax