Cool Gradients
Blues, teals, greens and violets — the default register for software that wants to read as calm, competent and trustworthy.
83 gradientsCSS · Tailwind · Figma
Cool Gradients · Brand · Blue
83 gradients · page 3 of 4Coinbase
Coinbase
Venmo
Venmo
Revolut
Revolut
BMW
BMW
Ralph Lauren
Ralph Lauren
Prime Video
Prime Video
Paramount+
Paramount+
Disney+
Disney+
Intercom
Intercom
Loom
Loom
ClickUp
ClickUp
Confluence
Confluence
Jira
Jira
Trello
Trello
Salesforce
Salesforce
Webflow
Webflow
Vue
Vue
Tailwind CSS
Tailwind CSS
Viber
Viber
Signal
Signal
Tumblr
Tumblr
Mastodon
Mastodon
Telegram
Telegram
Linear
Linear
About cool gradients
Cool gradients dominate fintech, SaaS and health products for a reason: they recede. A blue-violet hero sits behind an interface without competing with it, which is exactly what you want when the product, not the page, is the thing being sold.
Because so many products land here, cool is also the easiest place to look generic. The way out is the hue range rather than the hue: a tight teal-to-blue travel reads as considered, while a blue-to-purple sweep across 120 degrees reads as a template.
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
