Bold Gradients
High saturation, high contrast, wide hue travel — gradients built to be seen first and read second.
24 gradientsCSS · Tailwind · Figma
Bold Gradients · Brand · Pink
24 gradientsAirtable
Airtable Universe-Inspired
Patreon
Patreon
InVision
InVision
Lyft
Lyft
Twilio
Twilio
Rive
Rive
Brex
Brex
Gumroad
Gumroad
Uniswap
Uniswap
LG
LG
Alibaba
Alibaba
Lululemon
Lululemon
Grubhub
Grubhub
Supreme
Supreme
Apple Music
Apple Music
ConvertKit
ConvertKit
Asana
Asana
Airtable
Airtable
Angular
Angular
Dribbble
Dribbble
Red Bull
Red Bull
Slack
Slack
TikTok
TikTok
InstagramInstagram
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
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
