Red Gradients

Reds, crimsons and warm corals — the highest-urgency band on the wheel, and the one most likely to be doing a job rather than decorating.

118 gradientsCSS · Tailwind · Figma
All RedOrangeYellowGreenTealBluePurplePink
All types BrandCuratedSeasonalUI
All moods WarmCoolBoldPastelDarkNeonNeutral

Red Gradients · Bold

118 gradients · page 1 of 5
12…5→

Red combinations

All combinations →
Red & Orange36Red & Yellow14Red & Green8Red & Teal11Red & Blue14Red & Purple25Red & Pink25

About red gradients

Red is the only hue that arrives with a default meaning already attached in an interface: it means stop, or error, or delete. That makes it powerful in marketing and risky in product, because a red gradient behind a success message reads wrong before anyone has finished the sentence.

Where it earns its place is appetite, urgency and heat — food, sport, sale banners, anything with a deadline on it. Pair it with a deep neutral rather than a second saturated hue; two loud colours in one gradient usually cancel each other out.

Explore more gradients

By type

BrandCuratedSeasonalUIBrands A–ZGrainyNewGradient of the daySurprise me

By mood

WarmCoolBoldPastelDarkNeonNeutral

By industry

TechMediaFinanceFashionFood

By colour

RedOrangeYellowGreenTealBluePurplePinkColour pairsAny hex code

Build your own

Gradient GeneratorAnimated Gradient GeneratorMesh Gradient GeneratorTonal Gradient GeneratorGlassmorphism BuilderGradient Text GeneratorGradient from ImageGradient Wallpaper MakerGradient Border GeneratorGradient Contrast CheckerSVG Wave & Blob GeneratorDuotone GeneratorAurora Background GeneratorGradient Button GeneratorGradient Palette GeneratorGradient Shadow GeneratorCSS Pattern GeneratorGradient Avatar GeneratorGradient Loader GeneratorGradient Overlay Generator