Curated Gradients

Original gradients built to be used, not just admired — balanced pairs and triples that hold up at large sizes and stay readable behind text.

20 gradientsCSS · Tailwind · Figma
All BrandCuratedSeasonalUI
All moods WarmCoolBoldPastelDarkNeonNeutral
All colours RedOrangeYellowGreenTealBluePurplePinkGrey

Curated Gradients · Warm · Purple

20 gradients
Curated

Relay

About curated gradients

Curated gradients are made in-house rather than taken from a brand. Each one is checked at hero size, as a card background and behind body copy, because a gradient that looks striking as a swatch often collapses into mud once type sits on top of it.

They are the safest starting point when a project has no brand palette yet, or when a brand gradient would carry the wrong association. Every one works as a text gradient too — the two-stop sets hold their color best at small sizes.

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