Gradients in UI

Gradients—smooth transitions between two or more colors—are a versatile UI design tool that adds depth, movement, and visual richness. After being banished during the flat design era, gradients made a strong comeback led by brands like Instagram, Stripe, and Apple. Modern gradient techniques leverage advanced color spaces (OKLCH, OKLAB) for perceptually smooth transitions and apply noise textures to prevent color banding on screens.

stellae.design

Visual Design

Why It Matters

Gradients add depth, movement, and visual richness to flat interfaces, serving as a versatile tool for establishing atmosphere, guiding attention, and differentiating interactive elements from static content. After years of flat design dominance, gradients have returned as a nuanced design element that bridges the gap between sterile minimalism and gratuitous decoration. When used with restraint, gradients create perceivable depth cues, improve visual hierarchy, and inject brand personality without adding interface complexity.

Real-World Examples

Instagram's brand gradient

Instagram's iconic purple-to-orange gradient across its logo and UI accents creates an instantly recognizable brand identity that feels warm, energetic, and contemporary. The gradient transitions smoothly through carefully chosen intermediate hues that avoid muddy midpoints, and it is applied consistently across the icon, story rings, and selected UI highlights. The restraint in application — accent elements only, never as a full background — prevents the gradient from overwhelming the content-focused interface.

Stripe's atmospheric section backgrounds

Stripe uses subtle, large-scale gradients as section backgrounds on its marketing pages, transitioning between soft blues, purples, and greens to visually separate page sections without hard lines or borders. The gradients are barely perceptible in isolation but collectively create a sense of movement and depth that guides the eye down the page. Text is placed only on portions of the gradient where contrast remains well above WCAG thresholds.

Counter-example

Rainbow gradient on primary action buttons

A SaaS application applies a vibrant five-color rainbow gradient to all primary action buttons, creating a visual spectacle that draws immediate attention but clashes with the interface's neutral color system. The gradient makes button labels difficult to read because contrast ratios fluctuate wildly across the color transitions, and the visual intensity trains users to avoid the buttons rather than engage with them. The decorative excess undermines the buttons' functional purpose as clear, inviting action triggers.

Role-Specific Guidance

Common Mistakes

• The most common mistake is using gradients with colors too far apart on the color wheel, which produces muddy grey or brown midpoints that make the interface look unintentionally dirty. Another frequent error is applying gradients to interactive elements without checking text contrast across the entire gradient range, creating buttons that pass accessibility checks at one end but fail at the other. Teams also overuse gradients by applying them to every surface, which overwhelms the visual hierarchy and makes the interface feel like a design portfolio piece rather than a functional product.