Dark gradient backgrounds: depth without the gloom

A good dark gradient background is a tinted near-black with one colour glowing out of it, as if a single light were on in a dark room. The tint gives the blacks depth, the lit colour gives the eye somewhere to go, and the large dark area makes white type look sharp. Without those three things, a dark gradient just looks like a dim screen.

Start with a tinted near-black

Pure black #000000 is a dead end: there is nothing to blend from, and any colour next to it looks pasted on. A near-black with a hint of hue gives the gradient a family to belong to. Blue-blacks feel cool and technical, violet-blacks feel luxurious, green-blacks feel natural and warm browns feel like leather and wood. Choose the tint that matches the colour you plan to light.

Add one lit colour

The lit colour is what turns darkness into atmosphere. Place it off-centre, usually near one edge or corner, so it reads as a light source. Keep it in the same family as the tint: violet light on violet-black, teal on blue-black. One colour is almost always enough. Two can work if they are neighbours. More than that starts to look like a nightclub, which is fine if you are designing for one; see neon gradients.

Why some dark gradients look gloomy

The most common mistake is mixing the lit colour towards grey on its way to black. Keep chroma up as it darkens: violet should become deeper violet, then violet-black, never grey. Blending in OKLCH helps; muddy gradients explains why.

Banding: the dark gradient's biggest risk

Dark gradients span only a small range of values, often a dozen or two per channel, and people are very sensitive to small steps between dark tones. So a smooth dark ramp across a full screen is the perfect recipe for visible stripes. Three habits prevent it: give the ramp enough range, add fine grain, and export without heavy compression. The detail is in gradient banding and grainy gradients.

Text on a dark gradient

Dark backgrounds are generous to type, but only in the dark areas. Keep words away from the lit colour, where contrast drops. Use off-white rather than pure white for long passages, because pure white on near-black can feel glaring. And measure: WCAG asks for at least 4.5:1 for body text and 3:1 for large text, which you can check with the WebAIM contrast checker.

Where dark gradient backgrounds work best

Dark gradients suit anything that happens at night, feels premium or needs colour to glow: music and events, film and games, technology launches, fragrance and spirits, and portfolios where the work should be the brightest thing on the page. They also help product photography, because a lit object on a dark ground reads as precious.

• Covers and posters: a dark ground makes a single bright title the hero
• Stories and Reels: full-screen dark frames feel cinematic on a phone
• Slides: light text on dark is calmer in a dim room than dark text on white
• Website heroes: a dark hero makes the first screen feel deliberate; see website hero backgrounds

They suit less well where people read for a long time on paper, or where a brand is built on daylight, freshness or play. There, a pale ground with one soft colour does the same job.

A dark gradient background in CSS

.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}

If you are designing a whole interface in dark mode rather than one background, see dark mode design. Many Marks in the Market are built on dark grounds, and they make room for your words automatically, moving their calmest area behind the text.