Warm Gradients

Reds, oranges and golds — the half of the wheel that reads as energy, appetite and reward. Copy any one as CSS, Tailwind or a Figma token.

103 gradientsCSS · Tailwind · Figma

All Warm Cool Bold Pastel Dark Neon Neutral

All types Brand Curated Seasonal UI

All colours Red Orange Yellow Green Teal Blue Purple Pink Grey

Warm Gradients · Brand

103 gradients · page 2 of 5

Maze

Rive

Culture Amp

Gusto

Rippling

Deel

Brex

Lemon Squeezy

Gumroad

Product Hunt

Producthunt

Substack

Ghost

Pitch

Superhuman

Readwise

Raycast

Arc

Metamask

Bitcoin

Valorant

League of Legends

Roblox

Nintendo

←1 2 3…5 →

About warm gradients

Warm gradients carry a sense of motion even when nothing is animating, which is why they end up on streaks, rewards, upgrade prompts and anything to do with food. They also flatter skin tones, so they sit well behind photography of people.

The risk is heat fatigue: a warm gradient behind a full page of warm content stops registering. Use one as the accent against a neutral or cool ground rather than as the whole environment, and check the darkest stop for contrast if type sits on top.