# Moody gradients: dark, rich codes with atmosphere

[Canonical HTML page](https://gradiently.design/guide/moody-gradients)

Dark is easy. Atmosphere is harder: it comes from where the light falls, how much colour you hold back and what the shadows are made of. Twelve codes, and the reasoning behind them.

## The short version

- A moody gradient is a dark blend where most of the frame sits in shadow and colour appears only where light falls.
- Moody gradients use muted, slightly greyed colours rather than saturated ones, which is why they feel cinematic instead of loud.
- Shadows with a hint of colour, such as blue black or plum black, read as richer than pure black.
- One warm light against a cool ground is the quickest way to give a dark gradient atmosphere.
- Dark gradients band more than light ones, so add a little grain and export as PNG or high quality video.

A **moody gradient** is a dark blend that behaves like a dimly lit room: most of the frame sits in shadow, one area catches the light, and the colours are held back rather than pushed. The recipe is simple to state. Start from a tinted near black, add one or two muted mid tones, and let a single light, often warm against a cool ground, bring the surface to life. Below are twelve codes you can copy, then how to build your own and keep words readable on top.

## What makes a gradient moody, not just dark

Plenty of dark gradients feel flat. Navy fading to black is dark, but it has no weather in it. Mood comes from a few decisions that photographers and film colourists make by instinct, and you can make them on purpose.

- **Low key.** Roughly three quarters of the frame is shadow. Light is the exception, not the rule.
- **One source.** Light enters from a corner or edge, so the eye knows where the window or lamp is.
- **Held back colour.** Mid tones are slightly greyed. A dusty teal feels moodier than a bright one.
- **Coloured shadows.** The darkest point is blue black, green black or oxblood, never `#000000`.
- **Temperature contrast.** A small warm light in a cool scene, or the reverse, creates tension.

### Dark but flat

- Pure black at one end
- Bright, saturated accent
- Light spread evenly across the frame
- Straight diagonal, corner to corner
- Perfectly smooth digital surface

### Moody

- Tinted shadow that still has a hue
- Muted accent, slightly greyed
- Light pooled in one place
- Radial or soft angled falloff
- Fine grain, like film

## Twelve moody gradient codes

Each of these is a single CSS value you can paste into `background`. They are grouped loosely by temperature: cool and stormy first, then the warm, lamplit ones, then a few in between.

- Storm: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Midnight petrol: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Deep sea: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Forest at dusk: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Oxblood: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Last ember: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- Candlelit: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Streetlamp: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Bruised plum: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Ink and violet: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Moss and bronze: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Graphite rose: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Twelve moody gradients. Notice that none of them ends in pure black, and none uses a fully saturated colour.

If you want something closer to a clear night than a stormy one, [night sky gradients](https://gradiently.design/guide/night-sky-gradient) lean bluer and add stars. For deeper, glossier colour with more saturation, [jewel tones](https://gradiently.design/guide/jewel-tone-colors) sit one step brighter than anything here.

## A moody colour palette to build from

When you make your own, work from a palette rather than two colours. Five is plenty: a ground, two shadow steps, one muted mid tone and one light. The light is the only colour allowed any real brightness, and it should appear in a small area.

- Night ground: #0d1117
- Deep slate: #1b2330
- Storm: #2c3a4a
- Rain grey: #5b6b78
- Lamp amber: #c98a3a

A cool, rainy palette with one warm light. Swap the amber for a dusty rose or a pale sodium yellow and the story changes completely.

The reason warm light works so well against cool shadow is explained in [colour temperature](https://gradiently.design/guide/color-temperature). For more ready made sets, see [dark colour palettes](https://gradiently.design/guide/dark-color-palettes).

## How to make a moody gradient in CSS

1. **Set a tinted ground** Choose a near black with a hue in it, such as `#0b0d12` for blue black or `#120806` for warm brown black. Use it as the `background-color` fallback too.
2. **Add the shadow body** Lay a gentle linear gradient between two dark steps of the same hue. This gives the frame depth before any light arrives.
3. **Place one light** Add a radial gradient in a corner that fades to `transparent` by around 40 percent. Keep its colour muted and its opacity well below full.
4. **Add a cool counter light** Optionally, a second, larger and dimmer radial in the opposite corner, in the cool family. It stops the shadow side going dead.
5. **Finish with grain** A fine noise layer at low opacity hides banding and makes the surface feel like film. [Grainy gradients](https://gradiently.design/guide/grainy-gradients) has the code.

```css
.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}
```

A streetlamp glow at the top right, a cool teal haze at the bottom left and a slate body. Three layers, no images.

> **Dark blends band** With so little range between the darkest and lightest values, moody gradients show stepped bands on many screens and after compression. Grain, PNG exports and avoiding heavy JPEG quality settings all help. [Gradient banding](https://gradiently.design/guide/gradient-banding) explains the fix in detail.

## Putting words on a moody background

Light type on a dark ground reads well, until it crosses the one bright pool you worked so hard on. Plan the headline for the shadow side, and keep the light away from the words rather than behind them. A soft off white, such as `#ece6dc`, sits more comfortably on a moody ground than pure white, which can look harsh.

A dark vertical event story where the light area of the background sits behind the headline The late show

The background runs straight through the words, so the brightest area can land behind the headline.

The same dark event story with a calm shadow behind the headline and the glow kept to one edge

Here the Mark moves its calmest, darkest region behind the text, and the light stays at the edge.

That right hand version is what a Gradiently Mark does on its own: it knows where the words are, deepens the colour near the letters and picks light or dark type per line from its own palette, with no boxes or shadows added. [Text on a gradient](https://gradiently.design/guide/text-on-gradient) covers the manual version.

## Where moody gradients work best

| Use | Try | Size |
| --- | --- | --- |
| Late event or club night story | Ink and violet, Streetlamp | 1080×1920 |
| Podcast cover | Oxblood, Graphite rose | 3000×3000 |
| Restaurant or bar menu poster | Candlelit, Moss and bronze | A4, 2480×3508 |
| Website hero for a studio or agency | Storm, Midnight petrol | 1920×1080 |
| YouTube thumbnail for a thriller or essay | Last ember, Deep sea | 1280×720 |
| Spotify playlist cover | Forest at dusk, Bruised plum | 1080×1080 |

Moody gradients suit anything that happens at night, anything that wants to feel considered, and anything that should be listened to rather than shouted.

They suit night, music, drink, film, fragrance and quiet luxury. They suit a children's party or a summer sale far less. For a whole interface in this register, [dark gradient backgrounds](https://gradiently.design/guide/dark-gradient-backgrounds) covers the extra care that screens need.

If you would rather not hand tune layers, the Market has living Marks in exactly this register, searchable with words like "deep teal" or "oxblood". You can design with any unclaimed Mark for free, and claiming one means nobody else's poster will wear the same atmosphere.

## FAQ

### What colours make a moody gradient?

Tinted near blacks such as blue black or plum black, one or two muted mid tones like dusty teal or slate, and a single warmer light such as amber or ember.

### How is a moody gradient different from a dark gradient?

A dark gradient only needs to be dark. A moody one has a clear light source, held back colour and coloured shadows, which give it atmosphere.

### Should a moody gradient use pure black?

Usually not. A near black with a hint of hue, like `#0b0d12`, looks richer and blends more smoothly into the colours around it.

### Why does my dark gradient look stripy?

That is banding, which shows most in dark, subtle blends. Add fine grain and export as PNG or high quality video instead of a compressed JPEG.

### What text colour works on a moody gradient?

A soft off white usually reads best. Place it over the shadow side, away from the brightest area, and check contrast where every line sits.