Color-stops

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.

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.