Dark Gradients
Near-black grounds with a shift of color through them — for dark mode surfaces, overlays and heroes that need white type to sit cleanly on top.
68 gradientsCSS · Tailwind · Figma
Dark Gradients · Brand
68 gradients · page 1 of 3Threads
Threads App
Pandora
Pandora
Goodreads
Goodreads
MasterClass
Masterclass
Oura
Oura
Whoop
Whoop
Calm
Calm
Typeform
Typeform
Microsoft Teams
Microsoft Teams
American Express
American Express
Booking.com
Booking.com
Spotify
Spotify Canvas-Inspired
Resend
Resend
Temporal
Temporal
Trigger.dev
Trigger.dev
Prisma
Prisma
PostgreSQL
Postgres
Datadog
Datadog
Sentry
Sentry
Mercury
Mercury
Plaid
Plaid
Indie Hackers
Indie Hackers
About dark gradients
A flat black background is easy; a dark background with depth is not. These keep their lightness low while still moving through hue, which is what stops a dark hero from looking like an unstyled div and what makes an overlay feel deliberate.
Dark gradients are the safest choice behind white text, since the contrast ratio holds across the whole sweep rather than only at one end. They are also the natural pair for a neon accent — the dark ground is what gives the accent its charge.
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
