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 7
Puma

Puma

Mercedes-Benz

Mercedes

Domino's

Dominos

Palace

Palace

Dior

Dior

Prada

Prada

HBO Max

HBO Max

Tidal

Tidal

Zendesk

Zendesk

Wix

Wix

Next.js

Next.js

Railway

Railway

Cursor

Cursor

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.