Colors and stops tell the browser which colors to use in the gradients, and where they should stop. By default they’re spaced equally, but you can overrule that by giving specific color-stops, such as 20% or 40px.
Colors and stops are the same in middle and new syntax. They work the same for linear and radial gradients. Once you understand how regular color-stops work you can continue to repeating gradients.
background: -webkit-linear-gradient(bottom right,red,yellow,green); background: linear-gradient(to top left,red,yellow,green);
Without any further instructions the colours are equally divided. In this case, the red is at the start (0%), the yellow in the middle (50%), and the green at the end (100%).
New syntax
Middle syntax
background: -webkit-linear-gradient(bottom right,red,yellow 30%,green); background: linear-gradient(to top left,red,yellow 30%,green);
Now we give the yellow a 30% stop. This means the gradient will reach yellow at 30% of the length of the gradient. Red and green have no explicit stop, so they’re still assumed to be 0% and 100%.
New syntax
Middle syntax
background: -webkit-linear-gradient(bottom right,red,yellow 30%,green 60%); background: linear-gradient(to top left,red,yellow 30%,green 60%);
Now we also give the green a 60% stop. This means the gradient will reach green at 60%, and will fill up the remaining 40% with pure green.
New syntax
Middle syntax
background: -webkit-linear-gradient(bottom right,red,yellow 100px,green 200px); background: linear-gradient(to top left,red,yellow 100px,green 200px);
You can also use length units such as px. Now the gradient doesn’t fit into the initial box any more, but that’s OK.
New syntax
Middle syntax
background: -webkit-linear-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0)); background: linear-gradient(to top left,rgba(204,0,0,1),rgba(204,0,0,0));
You can use any color syntax you like, and also opacity. This one uses the same red everywhere, but varies its opacity. We’re back to two color-stops here, since we want a smooth transition throughout the element.
New syntax
Middle syntax
background: #000000 -webkit-linear-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0)); background: #000000 linear-gradient(to top left,rgba(204,0,0,1),rgba(204,0,0,0));
You can also give the element a regular background-color that will be used in the opacity.
New syntax
Middle syntax
background: -webkit-radial-gradient(bottom right,red,yellow 30%,green 60%); background: radial-gradient(at bottom right,red,yellow 30%,green 60%);
Here is the third example again, but now for a radial gradient. It all works exactly the same.
New syntax
Middle syntax
background: #000000 -webkit-radial-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0)); background: #000000 radial-gradient(at bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
And the radial version of the red-to-black example.
New syntax
Middle syntax