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?

20th Oct 2020, 5:02 PM
Marcelo Anjos
Marcelo Anjos - avatar
1 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.
21st Oct 2020, 8:17 AM
Med Amine Fh
Med Amine Fh - avatar