How work stop parameter gradient
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?
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.