not understanding repeating-linear-gradient color stops

Issue

I am a newbie learning web dev. I am trying to learn from MDN Docs. They have made available tutorials, so its easy to follow. But their material on repeating-linear-gradient is confusing to me. They have following code given on their site. I have added div here so that gradient can be seen in the code snippet.

div {
  height: 600px;
  width: 600px;
  background: repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

}

<div></div>

The explanation given for this is

A gradient repeating five times, going from the left to right, starting red, turning green, and back to red

I understand from left to right. But why is this repeated five times? I also have trouble understanding the stops given. Does red start at 0% or stop at 0% ? MDN docs are confusing in this regard. Can anybody explain ?

Solution

Lets take the repeating linear-gradient syntax from start to end.

to right defines the direction of the gradient. In this case from left to right.
red 0% means that it should start with red at 0% of the distance.
green 10% will let green be at the 10% distance while the colors will merge (gradient effect). red 20% is the last value of the syntax and it means that it should end at 20% with red.

0%     pure red
1-4%   more red than green (decreasing)
5%     equally red and green
6-9%   more green than red (increasing)
10%    pure green
11-14% more green than red (decreasing)
15%    equally red and green
16-19% more red than green (increasing)
20%    solid red
21-24% more red than green (decreasing>
25%    equally green and red
... keeps repeating

After that it will self-repeat. 100% / 20% = 5 and that's why it repeats itself 5 times.
If we add a new Value such as blue 50% then it takes 50% of the distance and can only repeat twice:

div {
  height: 600px;
  width: 600px;
  background: repeating-linear-gradient(to right, red 0%, green 10%, red 20%, blue 50%);

}

<div></div>

Answered By - tacoshy