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.
156 gradientsCSS · Tailwind · Figma
Dark Gradients
156 gradients · page 6 of 7Curated
Deep Space
Curated
Midnight City
Gymshark
Gymshark
Puma
Puma
Under Armour
Under Armour
Mercedes-Benz
Mercedes
Domino's
Dominos
Chipotle
Chipotle
Ralph Lauren
Ralph Lauren
Palace
Palace
Balenciaga
Balenciaga
Dior
Dior
Prada
Prada
HBO Max
HBO Max
Tidal
Tidal
Zendesk
Zendesk
Notion
Notion-Inspired Dark
Squarespace
Squarespace
Wix
Wix
Next.js
Next.js
Railway
Railway
PlanetScale
PlanetScale
Cursor
Cursor
Midjourney
Midjourney
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
