css - Color Stop Parameter in Linear Gradient -

i have repeating linear gradient css design.

#div1{     background: repeating-linear-gradient(red, yellow 10%, green 20%); } 

i know meant color parameters percentage right after color seems vague. meant ? identifies position color must start? or what?

i read documentation, couldn't understand it. can explain me in simpler words ?

thank you.

ok, i'll give shot...but first documentation actual @ w3.org...not w3schools!

this code (assuming div height of 100px):

#div1 {    background: repeating-linear-gradient(red, yellow 10%, green 20%);    height: 100px;  }

<div id="div1"></div>

so final % figure 20%, means, in case of repeating gradient, gradient end @ 20% of height of element , repeat.

so 100% / 20% = 5 gradient repeats 5 times.

see happens when last number changed

#div1 {    background: repeating-linear-gradient(red, yellow 10%, green 33.33%);    height: 100px;  }

<div id="div1"></div>

now each percentage, lets try standard left right gradient

#div1 {    background: linear-gradient(to right, red, yellow 10%, green 20%);    height: 100px;  }

<div id="div1"></div>

here color stops work this.

the gradient starts out red, , changes gradually until it's yellow @ 10% of width. color start changing again, time green, until it's green @ 20% of width...and stays color no other color mentioned after wards.

for solid band of color (say yellow) color has stated twice @ different values

#div1{      background: linear-gradient(to right, red, yellow 10%, yellow 20%, green 30%);      height: 100px;  }

<div id="div1"></div>

you can hard line change repeating percentage values when changing 1 color another

#div1 {    background: linear-gradient(to right, red 10%, yellow 10%, yellow 20%, green 20%);    height: 100px;  }

<div id="div1"></div>