A color stop is a color specification, optionally paired with a position, that defines one point in a gradient transition. Multiple stops create staged transitions, and omitted positions are distributed evenly. section 13.1.1
Use color-stop positions to control how a gradient renders:
- Specify positions with percentages or length units such as pixels and ems. section 13.1.1
- Place two stops at the same position to create an immediate color switch and produce stripes. section 13.1.1
- Reuse the same stop behavior in linear, radial, and conic gradients. section 13.1.3 section 13.1.4
Creating a striped gradient
Set turquoise to 40%, white from 40% through 60%, and blue at 60%. Matching positions create hard edges; the ranges create solid color bands. section 13.1.1
Listing 13.5 Placing two color stops on the same points to create stripes
.fade {
height: 200px;
width: 400px;
background-image: linear-gradient(
90deg,
turquoise 40%, #1
white 40% 60%, #1
blue 60% #1
);
}
Inspect a complete CSS example that uses repeated positions to turn a smooth linear gradient into stripes. section 13.1.1
