Gradient Design Principles: From Muddy to Magnificent
A gradient is two or more colors blended along a direction. The math is trivial; the design is hard. This article covers the four decisions that separate a polished gradient from a muddy one.
1. Pick analogous or complementary stops, never random
Gradients between analogous colors (close on the wheel) feel calm and natural. Gradients between complementary colors (opposite on the wheel) feel bold but require care - the midpoint can go gray.
Random non-harmonic stops produce visible bands and dirty middles. Use the color wheel to plan stops the same way you plan a palette.
2. Interpolate in OKLCH, not RGB
Default RGB interpolation is the source of every "muddy gray middle" gradient you have ever seen. RGB(255,0,0) to RGB(0,0,255) passes through RGB(127,0,127) which is a dirty plum. The same gradient in OKLCH passes through a vivid magenta.
/* Old, muddy */
background: linear-gradient(red, blue);
/* Modern, vivid */
background: linear-gradient(in oklch, red, blue);3. Add a midpoint for complementary gradients
When you must blend complementary colors, insert one or two intermediate stops to control the path. A red-to-blue gradient with a magenta midpoint stays vivid; a yellow midpoint stays warm; a cyan midpoint stays cool.
Three stops give you authorial control. Two stops give the browser authorial control.
4. Match the gradient to the surface
Hero backgrounds want soft, low-contrast gradients (small lightness delta) so text remains readable. Decorative buttons want bold high-contrast gradients to draw the eye. Match the contrast of the gradient to its job.
A common mistake: 100%-saturated radial gradients on hero sections. They look great in Figma and unreadable in production.
Try the related tools
Frequently asked questions
Why does my gradient look gray in the middle?
You are interpolating in RGB. Switch to OKLCH (`linear-gradient(in oklch, ...)`) and the middle stays vivid.
How many stops should a gradient have?
Two for simple blends, three for complementary blends with a controlled midpoint, five+ for decorative/hero gradients with intentional complexity.
Are radial and conic gradients OK?
Yes. The same OKLCH interpolation rule applies to all gradient types in modern CSS.