Color & Design·4 min read

Choosing Gradient Stops: A Pre-Ship Checklist

That hero gradient looked perfect on the designer's calibrated display, then shipped and turned into stripes on a mid-range office monitor. Gradients are the rare CSS feature where the code can be valid, the values reasonable, and the result still visibly broken. Choosing gradient stops deliberately, and previewing them before the merge, catches nearly all of it. The Gradient Preview tool exists for exactly that rehearsal: same syntax the browser will run, live canvas, no deploy required to find out.

Open the tool All insights

The gradient that failed after the merge

Why rehearsal beats review.

Gradient bugs slip through code review because the CSS reads fine. Nothing about background: linear-gradient(90deg, #1E3A8A 0%, #172554 100%) looks wrong in a diff, yet those two navies are so close in lightness that the transition is nearly invisible, and the section reads as a flat block that someone forgot to finish.

The failure modes are visual, so the test has to be visual. Pasting proposed stops into a live preview takes under a minute and answers the questions a diff can't: does the midpoint hold color, does the angle follow the layout, do the bands show. Teams that make this a habit stop discovering gradients in production screenshots.

Choosing gradient stops with intent

Positions are the design.

A stop is a color pinned to a position, and everything between stops is interpolation you don't directly control. Two stops at 0 and 100 percent spread the transition evenly, which is the default and often the problem: on a wide hero, an even spread means the interesting color change happens everywhere and therefore nowhere.

Pulling positions inward concentrates the change. Stops at 0 and 60 percent finish the transition before the section's midpoint, leaving a calm field where the headline sits. Adding a third stop lets you route the path: with #6366F1 and #8B5CF6 as endpoints, pinning a chosen mid color at 35 percent instead of the implied 50 shifts the gradient's weight without touching either end. In the Gradient Preview each stop is a hex field plus a position field, so testing these variations is typing, not recalculating.

A worked gradient: from two stops to three

The default, then a deliberate revision.

The tool opens with its own defaults, which make a clean baseline: background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); indigo to violet along a diagonal. These are neighboring hues with similar lightness, which is why the default never bands and never grays: short color distance, safe interpolation.

Now revise it. Add a stop with the + Add color stop control, set it to #A855F7 at 50 percent, and the violet gains a brighter core; the CSS updates live to linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #8B5CF6 100%). Then drag the angle from 135 to 180 and watch the light source appear to move from corner to top. Same three colors, meaningfully different section, and you've seen both versions before committing either.

Gradient mistakes that only show on real screens

Five that survive code review.

Each of these renders as valid CSS and fails visually.

Banding in gradients across long, slow transitions. When 800 pixels must cover a small lightness change, 8-bit color quantizes into visible stripes; shorten the run or widen the color distance.
Crossing the RGB dead zone. Distant hues interpolated by the browser can gray out in the middle; pin an intentional midpoint stop to carry the transition.
Ignoring gradient direction and readability. A dark-to-light sweep under light text means one end of the headline always loses contrast; run the darkest stop under the text block.
Stacking stops at the same position expecting a soft edge. Two stops at 50 percent create a hard line, which is a technique when chosen and a bug when not.
Testing only on a retina laptop. High-density displays dither banding into invisibility; the cheap external monitor is where stripes debut.

Three checks before you ship a gradient

A ninety-second routine.

Check the extremes of the angle slider's range around your chosen value; if the composition survives 15 degrees of drift, it will survive responsive reflow. Check every text region against the gradient's lightest and darkest stops, not the average, because contrast fails at the worst point, not the mean.

Then check the copied rule in place. The output line pastes directly into devtools on the real page, which catches the interactions no isolated preview can: overlapping images, blend modes, and the exact width the gradient must cross in your layout.

Gradient Preview next to the related generators

Same family, different jobs.

Gradient Preview and the CSS Gradient Generator are the same tool listed in two catalogs, one filed for designers browsing color, one for developers browsing CSS; use whichever you found first. The meaningful boundaries are with the tools beside them.

When a midpoint stop needs an actual computed value rather than a guess, the Color Blender interpolates your two endpoints and hands back the hex to pin. And when the gradient is part of a larger surface treatment, the CSS Box Shadow Generator covers the depth half of the effect with the same copy-the-rule workflow.