Color Stop Parameter in Linear Gradient - css

Question

I have this repeating linear gradient CSS design.
#div1{
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
I know what is meant by the color parameters but the percentage right after the color seems vague. What is it really meant for ? Is that identifies the position where the color must start? or what?
I already read the documentation, but I couldn't understand it. Can someone explain it to me in simpler words ?
Thank you.

Answer 1

OK, I'll give this a shot...but first the documentation is actual at w3.org...not W3Schools!
This is your code (assuming a div height of 100px):
#div1 {
background: repeating-linear-gradient(red, yellow 10%, green 20%);
height: 100px;
}
<div id="div1"></div>
So your final % figure is 20%, which means, in the case of a repeating gradient, that the gradient itself will end at 20% of the height of the element and then repeat.
So 100% / 20% = 5 so the gradient repeats 5 times.
See what happens when the last number is changed
#div1 {
background: repeating-linear-gradient(red, yellow 10%, green 33.33%);
height: 100px;
}
<div id="div1"></div>
Now as for each percentage, lets try this will a standard left to right gradient
#div1 {
background: linear-gradient(to right, red, yellow 10%, green 20%);
height: 100px;
}
<div id="div1"></div>
Here the color stops work like this.
The gradient starts out red, and changes gradually until it's yellow at 10% of the width. The color will start changing again, this time to green, immediately until it's fully green at 20% of the width...and then stays that color as no other color is mentioned after wards.
For a solid band of color (say yellow) the color has to be stated twice at different values
#div1{
background: linear-gradient(to right, red, yellow 10%, yellow 20%, green 30%);
height: 100px;
}
<div id="div1"></div>
You can get a hard line change by repeating the percentage values when changing from one color to another
#div1 {
background: linear-gradient(to right, red 10%, yellow 10%, yellow 20%, green 20%);
height: 100px;
}
<div id="div1"></div>