Blue Gradients

Blues from navy to sky — the largest set in the library, and the closest thing software has to a default.

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

Blue Gradients · Curated · Bold

39 gradients · page 1 of 2
12→

Blue combinations

All combinations →
Red & Blue14Orange & Blue12Yellow & Blue12Green & Blue11Teal & Blue32Blue & Purple32Blue & Pink36

About blue gradients

Blue is the most-used hue here because it is the most-used hue in the industry: it recedes, it reads as trustworthy, and it has never offended anyone. A blue hero sits behind an interface without competing with it, which is exactly what most products want.

It is also the easiest place to look like everyone else. The way out is the range rather than the hue — a tight navy-to-slate travel reads as deliberate, while a sweep from blue through violet across 120 degrees reads as a template from 2017.

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