Repeating versus reflecting linear gradients The graphic shows two gradient patterns, annotated with text labels and arrows. Both gradients use the same series of color stops, starting dark, slowly shifting to light, then quickly dark again. This cycle covers one-quarter of the width of the graphic, starting on the left. The two gradients differ in their repeat cycles. The gradient stretches across the top half of the graphic. Each cycle of the gradient repeats exactly, and is emphasized by a left-to-right arrow. 1st cycle left-to-right arrow, starting from x="0" 2nd cycle left-to-right arrow, starting from x="25%" 3rd cycle left-to-right arrow, starting from x="50%" 4th cycle left-to-right arrow, starting from x="75%" repeat The gradient stretches across the bottom half of the graphic. Each cycle of the gradient alternates direction, left-to-right then right-to-left, as do the arrows that emphasize the pattern. 1st cycle left-to-right arrow, starting from x="0" 2nd cycle, reflected right-to-left arrow, ending at x="25%" 3rd cycle left-to-right arrow, starting from x="50%" 4th cycle, reflected right-to-left arrow, ending at x="75%" reflect
Figure 1: spreadMethod options for repeating SVG gradients

A repeating SVG gradient is defined using the spreadMethod attribute. Figure 1 compares the two possible variations.

A value of repeat causes the color stops to repeat in the same order, from beginning to end. In contrast, a value of reflect causes the order and spacing of colors to alternate in each repeat.

Both of the gradients in Figure 1 repeat the sequence of color stops four times, as indicated by the arrows. However, in the reflected gradient every second cycle is reversed, as shown by the arrows pointing in the opposite direction.