Cool Gradients
Blues, teals, greens and violets — the default register for software that wants to read as calm, competent and trustworthy.
155 gradientsCSS · Tailwind · Figma
Cool Gradients · Blue
155 gradients · page 4 of 7Trigger.dev
Trigger.dev
Inngest
Inngest
Prisma
Prisma
PostgreSQL
Postgres
Algolia
Algolia
SendGrid
SendGrid
Datadog
Datadog
Sentry
Sentry
PostHog
Posthog
Amplitude
Amplitude
Mixpanel
Mixpanel
Spline
Spline
Mercury
Mercury
Paddle
Paddle
Indie Hackers
Indie Hackers
Hashnode
Hashnode
Webflow
Webflow University-Inspired
Bubble
Bubble
Retool
Retool
Cron
Cron
Craft
Craft
Linear
Linear App
Phantom
Phantom
OpenSea
OpenSea
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
