Gradients can be transformed into repeating gradients. This page explains and tests.
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.
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.
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.
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.
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.
All this can also be done with px (or ems or whatever) as units.
Still, the last color must also have a stop, just as in the percentual example.