Gradient Stop Optimizer
Turn a two-color gradient into an optimized 5, 7, or 9-stop version with no muddy midpoints. Hand-tuned without the hand.
The Two-Stop Gradient Problem and the Old Workaround
Before the in oklch CSS syntax shipped, the standard workaround for muddy gradients was to add intermediate color stops by hand. You would pick the two endpoint colors, then manually compute and add three or five intermediate colors between them, spaced evenly so the gradient stayed saturated through the middle. The process was tedious, the math was easy to get wrong, and the result depended on the designer guessing at the right intermediate hues. Even now that browsers support perceptually uniform interpolation directly, multi-stop gradients are still valuable in two specific cases. First, when targeting the 6 percent of users without OKLCH support, multi-stop hand-tuned gradients work as a robust progressive enhancement. Second, when you want a gradient that follows a specific curve like a logarithmic lightness ramp or a deliberate hue detour through a third color, multi-stop gives the control that two-color interpolation cannot. The Gradient Stop Optimizer automates the hand-tuned math so you can produce the multi-stop version in one click.
How the Optimizer Picks Intermediate Stops
The math is straightforward. Endpoints are converted to OKLCH, the interpolation is computed in OKLCH at evenly spaced percentages, and the intermediate colors are converted back to HEX or sRGB-safe OKLCH. Three options are offered for the number of stops: 5 stops gives smooth results for most gradient lengths up to 600 pixels, 7 stops handles longer gradients without visible banding, and 9 stops is the right pick for full-page hero backgrounds. The optimizer also offers two interpolation modes: shorter hue takes the perceptually most direct path between the two hues, while longer hue takes the path around the back of the wheel for spectrum-style gradients. The output is a single CSS declaration with all the stops listed, ready to paste into a stylesheet. A toggle lets you swap between an in oklch declaration for modern browsers and a flat sRGB declaration with the same hand-computed stops for older browser support; both are visually almost identical because the stops were computed in OKLCH either way.
When to Use 5, 7, or 9 Stops
Five stops is the right pick for the vast majority of UI gradients: buttons, card backgrounds, accent strips, and short hero sections. The intermediate stops mask any banding from the eight-bit per channel color depth that browsers use for gradient rendering, and the file size of the CSS declaration stays small. Seven stops is the right pick for longer gradients where five stops still shows visible bands, especially on OLED screens that render gradients with higher precision. Nine stops is the right pick for full-page or full-width hero backgrounds where any banding would be visible and the extra fidelity is worth the slightly larger CSS declaration. Above nine stops, the marginal improvement is rarely visible and the CSS becomes unwieldy. If the gradient still looks rough at nine stops, the right fix is usually to dither it with a noise overlay rather than add more stops, since the limit is the eight-bit color depth rather than the stop count.
Frequently Asked Questions
Why do I need multi-stop gradients if browsers support in oklch?+
Two reasons. First, roughly 6 percent of users in 2026 are on browsers without in oklch support, and a hand-tuned multi-stop gradient is the cleanest fallback. Second, gradient banding on 8-bit displays is reduced by extra stops even with perfect interpolation, because each stop forces the browser to dither between integer color values. For large gradients on OLED screens the banding reduction is genuinely visible.
How does this differ from just adding stops in the Gradient Builder?+
The Gradient Builder is a manual tool where you pick each stop color yourself. The Gradient Stop Optimizer computes the intermediate stops automatically using OKLCH interpolation, so the math is consistent and the result avoids the muddy-middle problem without you having to hand-tune each color. Use this tool to generate a starting gradient, then use the Gradient Builder if you want to nudge specific stops by hand.
What does perceptually spaced mean in this context?+
It means the stop colors are evenly distributed in OKLCH lightness and hue, so each pair of adjacent stops looks like the same amount of color change. Naive RGB-spaced stops bunch up the visual change in the middle and stretch it at the endpoints, which is what makes hand-tuned RGB gradients hard to get right. OKLCH spacing solves this automatically.
Is the output CSS valid in every browser?+
Yes for the sRGB output toggle, which uses standard linear-gradient syntax with multiple color stops and works in every browser since 2010. The in oklch toggle uses CSS Color Level 4 syntax and works in browsers shipped since 2023, covering roughly 94 percent of users. Picking the sRGB output preserves the perceptual stop spacing while keeping universal compatibility.
How many stops should I pick for a hero section?+
For a typical hero background spanning the full viewport, 7 stops eliminates visible banding on most screens. For an extra-wide ultrawide-monitor hero, 9 stops is worth the slightly larger CSS. For mobile-first hero sections where the gradient is shorter, 5 stops is enough. The tool defaults to 7 and lets you preview each option to compare.
Can I optimize a gradient with more than two endpoints?+
This tool handles two-endpoint gradients, which is the dominant case in design system work. For three or more endpoints, the right workflow is to chain two-endpoint optimizations: optimize endpoint A to B, then B to C, and paste both into the Gradient Builder for a unified declaration. A three-endpoint optimizer is on the roadmap.
Does the optimizer support radial and conic gradients?+
The math is identical for radial and conic; only the CSS function name changes. The tool generates linear-gradient by default but the stop list can be pasted into any radial-gradient or conic-gradient declaration without modification. The stop spacing is in percentages, which all three gradient functions accept.
Why does the result sometimes have ugly numbers like 14.3 percent?+
Evenly spaced stops between two endpoints land at fractional percentages when the stop count is not a divisor of 100. For 7 stops the positions are 0, 16.67, 33.33, 50, 66.67, 83.33, and 100; for 5 stops they are 0, 25, 50, 75, and 100, which are cleaner numbers. If exact integer percentages matter for your codebase, picking 3, 5, or 11 stops gives whole-number positions.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service