Bold Gradients

High saturation, high contrast, wide hue travel — gradients built to be seen first and read second.

30 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

Bold Gradients · Brand · Purple

30 gradients · page 1 of 2

Notion

Google Gemini-Inspired

Loops

Clerk

Inngest

Mixpanel

Penpot

Lattice

Gumroad

Cron

Polygon

Solana

Fortnite

Stripe

Stripe Radar-Inspired

HBO Max

Deezer

ClickUp

Railway

PlanetScale

1 2 →

About bold gradients

Bold is the largest mood in the library because most brand gradients are bold by design. They earn their place on hero sections, launch banners, app store screenshots and anywhere the job is to stop a scroll rather than support a paragraph.

They are also the least forgiving behind text. A bold gradient usually passes contrast at one end and fails at the other, so either place type over the dark stop only, or drop a scrim between the two. The contrast readout in the Gradient Text Generator reports the weakest point for you.

Bold Gradients

Bold Gradients · Brand · Purple

Notion AI-Inspired

Udemy

Make

Messenger

Lyft

Microsoft Copilot-Inspired