Designing with gradients: when they help and when they hurt

Gradients are back — not as skeuomorphic shadows but as a contemporary design tool for backgrounds, UI surfaces, and brand systems. But the same properties that make gradients expressive also make them easy to misuse. Understanding the mechanics helps you use them intentionally.

Color Theory UI/UX Brand

Highlights

Gradients succeed when they communicate directionality, depth, or a transition between states. They fail when they become decorative noise that competes with content. The test: if the gradient were a flat color, would the design still communicate its hierarchy and purpose?

The most common gradient mistake is interpolating through gray. A gradient from a warm orange to a cool blue that passes through the color wheel's midpoint will create a muddy gray band in the center. Fix this by routing the gradient through a hue that connects them — amber → yellow → green → teal — or by using perceptual color interpolation (OKLCH) instead of RGB.

Gradients work best when they have a light source logic. Top-to-bottom, upper-left-to-lower-right, and radial gradients from the center all imply a consistent light source. Arbitrary diagonal gradients or multi-stop gradients without a clear directionality logic read as arbitrary rather than intentional.

Why gradients fell out of favor and why they're back

Flat design's rise in the early 2010s was a reaction against skeuomorphism's overuse of gradients to simulate physical depth — beveled buttons, leather textures, and 3D chrome effects. The solution was an overcorrection: all color became solid, all surfaces became flat. What's happening now is more nuanced. Gradients are being used not to simulate physicality but to express energy, warmth, and brand personality. The difference is intent: a gradient that adds atmospheric depth to a hero background is doing something different from a gradient that tries to make a button look pressable.

The mechanics of gradient quality

A gradient's quality comes down to three decisions: the color pair, the interpolation path, and the easing curve. The color pair determines what hues are involved. The interpolation path determines what hues appear between them — RGB interpolation often creates desaturated midpoints; HSL interpolation creates brighter but sometimes garish midpoints; OKLCH interpolation creates perceptually uniform transitions that look most natural. The easing curve determines the distribution of the transition — a linear gradient applies the transition evenly, while an ease-in or ease-out gradient creates gradients that linger longer at one end, which creates a different atmospheric effect.

Practical gradient rules for UI and brand work

For UI backgrounds, use subtle gradients with low contrast between stops (L difference under 8%) to add atmospheric depth without competing with foreground content. For hero sections and brand expressions, higher contrast is acceptable but the gradient should move from a primary brand color toward a hue that is adjacent on the color wheel, not directly across it. For interactive elements like buttons, gradients are acceptable when they reinforce the brand palette and when the hover state has a corresponding gradient shift — a static gradient button that does not respond to hover reads as an image, not a component.

Newer issue

Working with pastel palettes: softness without weakness

2027-02-11

Older issue

Color for logo design: constraints that make logos work

2027-02-25