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.
On this page
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.
If you want something closer to a clear night than a stormy one, night sky gradients lean bluer and add stars. For deeper, glossier colour with more saturation, jewel tones 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.
The reason warm light works so well against cool shadow is explained in colour temperature. For more ready made sets, see dark colour 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
#0b0d12for blue black or#120806for warm brown black. Use it as thebackground-colorfallback 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
transparentby 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 has the code.
.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%);
}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.
The background runs straight through the words, so the brightest area can land behind the headline.
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 covers the manual version.
Where moody gradients work best
Try
Size
Try
Size
Try
Size
Try
Size
Try
Size
Try
Size
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 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile