Bold Gradients

High saturation, high contrast, wide hue travel — gradients built to be seen first and read second.

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

Bold Gradients · Red

118 gradients · page 3 of 5
beehiiv

Beehiiv

Auth0

Auth0

Redis

Redis

Twilio

Twilio

Fastly

Fastly

Hotjar

Hotjar

Maze

Maze

Rive

Rive

Gusto

Gusto

Deel

Deel

Brex

Brex

Ghost

Ghost

Pitch

Pitch

Raycast

Raycast

Roblox

Roblox

←12345→

About bold gradients

Bold is the largest mood in the library because most brand gradients are bold by design. They earn their place on hero sections, launch banners, app store screenshots and anywhere the job is to stop a scroll rather than support a paragraph.

They are also the least forgiving behind text. A bold gradient usually passes contrast at one end and fails at the other, so either place type over the dark stop only, or drop a scrim between the two. The contrast readout in the Gradient Text Generator reports the weakest point for you.

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