A color stop marks the position in a CSS gradient where one color ends and the next begins. Think of it as a milestone on the gradient’s color journey. section 17.9
Use color stops to control how a gradient changes:
- Place a percentage after a color to set its transition position, such as white 25%. section 17.9
- Let the first and last colors use their defaults: 0% at the beginning and 100% at the end. section 17.9
- Reuse the same stop idea in both linear-gradient() and radial-gradient(). section 17.10
A gradient with a middle stop
background-image: linear-gradient(to top right, red, white 25%, blue); The gradient starts with red, reaches white at 25%, and finishes with blue. section 17.9
div {
background-color: blue; #1
background-image: linear-gradient(to top right, red, white 25%, blue); #2
height: 175px; #3
width: 100%;
}
Inspect a complete CSS example showing a directional gradient with an explicitly positioned middle color stop. section 17.9
