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 2 of 7
Pandora

Pandora

Oura

Oura

Whoop

Whoop

Calm

Calm

Curated

Dusk

Curated

Argon

Curated

Royal

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.