Color Stops
Precise color stops control where colors begin and end. A midpoint hint between two stops adjusts the transition curve.
CSS
Intermediate
4 min read
Color Stops and Hints
Example
.hard-stop { background: linear-gradient(90deg, red 50%, blue 50%); }
.soft-stop { background: linear-gradient(90deg, red 20%, yellow 40%, green 80%); }
.hint { background: linear-gradient(90deg, red, 30%, blue); }
/* 30% is a midpoint hint — transition is faster on the left */ Pro Tip
Hard stops (same position, two colors) create stripes without SVG.