Pastel Gradients

Low saturation, high lightness — soft grounds that hold dark text comfortably and never fight the interface on top of them.

34 gradientsCSS · Tailwind · Figma
All WarmCoolBoldPastelDarkNeonNeutral
All types BrandCuratedSeasonalUI
All colours RedOrangeYellowGreenTealBluePurplePinkGrey

Pastel Gradients · Blue

34 gradients · page 1 of 2
Phantom

Phantom

12→

About pastel gradients

Pastels are the working surface of light-mode design: card backgrounds, empty states, onboarding illustrations, subscription tiers and success confirmations. They give a page warmth or coolness without committing it to a loud accent.

The trade-off is that pastels lose definition at small sizes and on cheap screens, where two adjacent stops can flatten into one wash. Keep the two ends far enough apart in lightness that the gradient survives, and never rely on a pastel gradient alone to signal state.

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