Black gradient
Black gradients add depth without colour: a near-black that lifts to charcoal, or black fading to transparent over a photo so text stays readable. Below are 12 black gradients — copy the CSS, download a PNG, or open one in the editor.
- Aa · 7.4:1
White text: Passes AA
- Aa · 7.5:1
White text: Passes AA
- Aa · 7.4:1
White text: Passes AA
- Aa · 7.4:1
White text: Passes AA
- Aa · 2.7:1
White text: Fails AA — no plain text
- Aa · 13.7:1
White text: Passes AA
- Aa · 7.4:1
White text: Passes AA
- Aa · 7.4:1
White text: Passes AA
- Aa · 7.5:1
White text: Passes AA
- Aa · 7.5:1
White text: Passes AA
- Aa · 2.7:1
White text: Fails AA — no plain text
- Aa · 8.7:1
White text: Passes AA
Using black gradients well
Good for: dark-mode backgrounds, image overlays and scrims, luxury and tech brands, footers.
Pairing: A whisper of hue (a blue- or violet-tinted black) looks richer than pure #000. For overlays, fade black to a transparent black, not to white.
Readable text: White text on near-black passes AAA easily. On a black-to-transparent scrim, check contrast at the lightest point where text sits. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.
These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.
Questions
What is the CSS code for a black gradient?
A simple black gradient is background: linear-gradient(in oklch 135deg, #515561 0%, #2d313c 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with black in a gradient?
A whisper of hue (a blue- or violet-tinted black) looks richer than pure #000. For overlays, fade black to a transparent black, not to white.
What text colour is readable on a black gradient?
White text on near-black passes AAA easily. On a black-to-transparent scrim, check contrast at the lightest point where text sits. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.
How do I download a black gradient image?
Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.
Where are black gradients typically used?
Common uses: dark-mode backgrounds, image overlays and scrims, luxury and tech brands, footers.