Gradient colour combinations

Two colours that work together — every pairing in the library, from neighbouring blends to bold contrasts. Most popular first.

28 combinationsCSS · Tailwind · Figma
Green & Teal43 gradientsRed & Orange36 gradientsBlue & Pink36 gradientsOrange & Pink35 gradientsPurple & Pink34 gradientsTeal & Blue32 gradientsBlue & Purple32 gradientsOrange & Yellow31 gradientsTeal & Purple28 gradientsRed & Purple25 gradientsRed & Pink25 gradientsOrange & Purple22 gradientsYellow & Green22 gradientsTeal & Pink22 gradientsYellow & Teal16 gradientsRed & Yellow14 gradientsRed & Blue14 gradientsOrange & Teal14 gradientsYellow & Pink14 gradientsOrange & Blue12 gradientsYellow & Blue12 gradientsRed & Teal11 gradientsGreen & Blue11 gradientsOrange & Green10 gradientsGreen & Purple10 gradientsGreen & Pink10 gradientsRed & Green8 gradientsYellow & Purple8 gradients

Or browse by one colour

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