How work stop parameter gradient

Question

I don't know how work stop parameter.

I tried: background: linear-gradient(blue 5%, yellow 10%, green 15%);

and

background: linear-gradient(blue 5%, yellow 10%, green 15%, red);

Trying comparing, but not I expect.

and so different if:
background: linear-gradient(blue 5%, yellow 10%, green, red);

Ok, are stop, it I know, and when passing parameter it should stop at that point.

And why when passing stop on last color it full? Should not stop at that stop parameter?

Answer 1

Let me explain why:

Percentage is used to specify color stops' POSITION, not SIZE.
The default value of linear-gradient's angle(direction) is "top" (to bottom), so you can refer to the part of vertical offset.

Each of color stops has its start position and end position.

the example: linear-gradient(red 20%,green ? ,green 80%,blue80% )

In this example :
The position of top color stop(red) is from 0 to 20%(0 is omited);
The position of the middle color stop(green) is 20% to 80%;
The position of the bottom color stop(blue) is 80% to 100%(100% is omited).

And only the same position(one's end and another one's start) of adjacent different color stops can create a solid sharp line.