Gradient stops
Night
#0B1020 0% Charcoal
#1F2937 52% Soft Black
#09090B 100% CSS gradient
Black Gradient
A restrained dark gradient from near-black navy through charcoal to soft black.
Designed as a subtle dark-surface gradient rather than a high-contrast decorative effect.
A black gradient is usually more useful as a near-black neutral progression than as pure black-to-black. Small hue bias can create depth without obvious color.
CSS
.example {
background: linear-gradient(135deg, #0B1020 0%, #1F2937 52%, #09090B 100%);
}Gradient contrast varies across the surface. Test important text against every area it may overlap instead of relying on a single midpoint color.
Angle previews
90°
135°
180°
Ready-to-use variations
Neutral charcoal
Neutral dark surface progression.
linear-gradient(135deg, #3F3F46 0%, #18181B 52%, #09090B 100%) Blue black
Cool dark gradient for product surfaces.
linear-gradient(145deg, #1E293B 0%, #0F172A 50%, #020617 100%) Warm black
Warm-neutral alternative for editorial designs.
linear-gradient(120deg, #292524 0%, #1C1917 52%, #0C0A09 100%) Tuning tips
- Check secondary text as carefully as primary text on dark surfaces.
- Keep near-black stops distinct enough that the gradient is visible on the target display.
- Avoid assuming OLED-black aesthetics are appropriate for every interface.
Related gradients
Blue Gradient
A three-stop blue gradient from pale sky blue through vivid blue to deep navy.
Blue Purple Gradient
A blue-to-purple gradient moving from saturated blue through indigo to violet.
Green Gradient
A green gradient moving from light mint through emerald to deep forest green.
Orange Gradient
An orange gradient from light peach through vivid orange to deep burnt orange.