CSS gradient color stops explained: positions, hard stops, and color hints

A CSS gradient is a list of colors and the positions where they land. Everything interesting, stripes, smooth blends, shifted midpoints, repeating patterns, comes from how you place those stops. Once you understand the positioning rules, you can stop guessing and write gradients that do exactly what you intend.

Stops and positions

Each color in a gradient can carry a position, given as a length or percentage along the gradient line.

linear-gradient(to right, red 0%, blue 100%);

Positions are optional. If you omit them, the browser distributes colors evenly: the first sits at 0 percent, the last at 100 percent, and the rest spread equally. So linear-gradient(red, yellow, blue) places yellow at exactly 50 percent.

Between two stops the browser interpolates smoothly. Before the first stop it paints the first color solid; after the last stop it paints the last color solid. That edge behavior matters, because a gradient that does not reach 0 and 100 percent simply holds its end colors flat on either side.

Hard stops for stripes

To get a crisp edge instead of a blend, give two adjacent stops the same position. With no distance to interpolate across, the color changes instantly.

linear-gradient(to right,
  red 0 50%,
  blue 50% 100%);

The result is a two-color split down the middle with a sharp line. The modern double-position syntax, red 0 50%, is shorthand for writing the color twice at each boundary. This technique builds stripes, checkerboards (with two gradients), and sharp dividers, all without an image.

Color hints move the midpoint

Between two color stops you can insert a single position with no color. That is a color hint, and it sets where the blend reaches its 50 percent mix point.

linear-gradient(to right, red, 20%, blue);

Normally the halfway color sits at the geometric midpoint. The 20% hint pushes it to the 20 percent mark, so the transition from red happens fast and the blue region dominates. This is how you bias a gradient toward one color without changing the endpoints, which is useful for making a fade feel more natural, since linear midpoints often look off to the eye.

Repeating gradients

repeating-linear-gradient and repeating-radial-gradient tile the defined stop pattern across the whole element. The key rule: the repeat length is the distance from the first stop to the last stop you specify. The pattern then repeats back to back from there.

repeating-linear-gradient(45deg,
  #ccc 0 10px,
  #eee 10px 20px);

This paints 10px bands of two greys at a 45 degree angle, repeating every 20px, which is the span of the stops. A classic barber-pole or progress-bar texture. The common mistake is using percentage stops in a repeating gradient and expecting fine tiling: 0% 50% and 50% 100% fills the whole box once and never visibly repeats, because the stop span is already 100 percent. Use fixed lengths like px for repeating patterns so the tile is smaller than the element.

Gotchas worth remembering

• Order and monotonicity. List stops in increasing position order. If a stop's position is smaller than the one before it, the browser clamps it up to match, which silently collapses a stop you meant to place earlier.
• Interpolation color space. Modern CSS lets you blend in different color spaces, for example in oklch, which avoids the muddy grey that sRGB interpolation produces between complementary colors. Worth it for vivid gradients.
• Transparent fades. Fading a color to transparent fades toward transparent black, which can leave a dark fringe. Fade to the same color at zero alpha instead.

To experiment with stop positions, hard stops, and hints interactively and copy the exact CSS, build it in the CSS Gradient Generator and adjust the stops until the blend lands where you want it.