[Solved] What does % value means in CSS gradient?


It means color stops. background-image: linear-gradient(140deg, cyan 0%, purple 50%, lime 75%); means start at cyan at 0% and change to purple at 50% and lime at 75%

It will turn cyan to purple at the 50% mark, and then transitions from purple to lime over 35% of the gradient.

see the difference between not doing % and doing %

#first {
    background-image: linear-gradient(140deg, cyan, purple, lime);
}
#second {
    background-image: linear-gradient(140deg, cyan 0%, purple 50%, lime 75%);
}
<div id="first">Hello world</div>
<div id="second">Hello world</div>

also see this https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

solved What does % value means in CSS gradient?