HTML
<h1>
the first and last color-stops should have position value,otherwise it is still a simple linear gradient
</h1>
<div class="linear-grd">
<p>browsers normally spread color-stops over the gradient line evenly if we do not specify position values,that is first color-stop is at 0% 2nd...last color-stop is at 100%.even if we specify color-stop position values for each color-stop still the browser will spread the last color-stop to be pure at 100% and the first color-stop to be covering the gradient line from 0% incase we set it at 10% for example.all that said is when using normal linear-gradient() function.hence i see the gradient covering the entire gradient box-the background,because of that spreading at the begining and end,only one gradient covering every thing,nothing is getting repeated!.<p>
</div>
<div class="rep-linear-grd">
<p>a repeating-linear-gradient() function would be useless and remain as a normal linear-gradient() function if the first and last color-stops do not have position values because the spreading over the gradient line will still present and what is said above is repeated and applied again (there will be only one gradient spreading from 0% to 100% covering the entire gradient box).</p>
</div>
<div class="rep-linear-grd-use">
<p>a repeating linear gradient can be seen alive only if the first color-stop or the last color-stop or both have a position value.otherwise repeating-linear-gradient() will be similar to linear-gradient().in other words the spreading over the gradient line can be stopped when repeating-linear-gradient() function is used along with specifying position values for either the first color-stop or the last color-stop or both and hence producing repeated gradients.</p>
</div>
<section class="footer">
<strong>Final words:</strong>
<h4>
the color-stop position values decide the size of the gradient.once the gradient size has been decided it can then be repeated over the gradient box.keep in mind that at least only the <i>last</i> color-stop should have a position value in order to decide the gradient size and then can be repeated.
</h4>
</section>
CSS
h1{
text-align:center;
}
div{
width:500px;
height:300px;
border:1px solid;
display:table;
margin:auto;
}
div p{
display:table-caption;
caption-side:bottom;
}
.linear-grd{
background:linear-gradient(black 2%,gold 9%,white 17%,purple 25%);
}
.rep-linear-grd{
background:repeating-linear-gradient(red,gray 19%,blue,purple);
}
.rep-linear-grd-use{
background:repeating-linear-gradient(red,purple,gray 10%);
/*background:repeating-linear-gradient(red 10%,purple,gray);*/
/*background:repeating-linear-gradient(red 10%,purple,gray);*/
}
.footer h4{
text-align:center;
}
