How do I make a black-to-transparent gradient?

Use rgba() values instead of hex, for example background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);. This is the standard recipe for hero image scrims.

Why does my black gradient look like a solid color?

If both stops are pure #000000, the gradient renders flat. Shift the second stop to #1F1F23 or #27272A so the gradient has measurable value variation, or use alpha so the gradient fades to transparent.

Which black gradient works best for dark mode cards?

Charcoal Velvet (#0B0B0F → #27272A) and Obsidian Field (#0B0B0F → #1F1F23 → #0B0B0F) are tuned for dark cards — they suggest depth without dropping to pure black where text shimmers on OLED.

Can I layer a black gradient over a video?

Yes, the same scrim recipe used for images works for video. Set the gradient div to pointer-events: none so it does not block playback controls underneath.

Gradient library · Black CSS

Black gradient CSS — fades, overlays, dark mode.

Ten black gradient CSS recipes for hero overlays, image scrims, dark mode cards, and full-page backgrounds. Includes solid black gradients, black-to-transparent fades, and the alpha values that make image overlays readable.

Studio Black · #000000 → #1F1F23 → #3F3F46

The hex codes.

Five anchor colors that show up across every preset in this library. Copy any one to use it directly.

Anchor
Pure Black
#000000
Near black
Ink
#0B0B0F
Surface dark
Charcoal
#18181B
Surface
Graphite
#27272A
Highlight
Slate
#3F3F46

The preset library.

Copy the CSS in one tap, or open any preset in the generator to adjust angle, stops, and type.

Studio Black
Hero background · linear · 135°
- #000000· 0%
- #1F1F23· 60%
- #3F3F46· 100%
```
background: linear-gradient(135deg, #000000 0%, #1F1F23 60%, #3F3F46 100%);
```
Open in gradient generator →
Pure Fade
Image overlay top · linear · 180°
- #000000· 0%
- #000000· 100%
```
background: linear-gradient(180deg, #000000 0%, #000000 100%);
```
Open in gradient generator →
Charcoal Velvet
Dark mode card · linear · 200°
- #0B0B0F· 0%
- #27272A· 100%
```
background: linear-gradient(200deg, #0B0B0F 0%, #27272A 100%);
```
Open in gradient generator →
Graphite Studio
Editorial panel · linear · 135°
- #18181B· 0%
- #52525B· 100%
```
background: linear-gradient(135deg, #18181B 0%, #52525B 100%);
```
Open in gradient generator →
Ink Wash
Image scrim · linear · 180°
- #000000· 0%
- #1F1F23· 100%
```
background: linear-gradient(180deg, #000000 0%, #1F1F23 100%);
```
Open in gradient generator →
Onyx Spotlight
Spotlight card · radial
- #3F3F46· 0%
- #000000· 100%
```
background: radial-gradient(circle at center, #3F3F46 0%, #000000 100%);
```
Open in gradient generator →
Obsidian Field
Brand surface · linear · 90°
- #0B0B0F· 0%
- #1F1F23· 50%
- #0B0B0F· 100%
```
background: linear-gradient(90deg, #0B0B0F 0%, #1F1F23 50%, #0B0B0F 100%);
```
Open in gradient generator →
Slate Twilight
Hero overlay · linear · 200°
- #020617· 0%
- #1E293B· 100%
```
background: linear-gradient(200deg, #020617 0%, #1E293B 100%);
```
Open in gradient generator →
Asphalt
Marketing section · linear · 160°
- #27272A· 0%
- #3F3F46· 100%
```
background: linear-gradient(160deg, #27272A 0%, #3F3F46 100%);
```
Open in gradient generator →
Ink Wheel
Decorative ring · conic · 0°
- #000000· 0%
- #3F3F46· 33%
- #1F1F23· 66%
- #000000· 100%
```
background: conic-gradient(from 0deg at center, #000000 0%, #3F3F46 33%, #1F1F23 66%, #000000 100%);
```
Open in gradient generator →

Black & charcoal

How to use this gradient family.

The CSS for a clean black gradient.

A pure black gradient is rarely two stops of #000000 — that produces a flat field. The trick is to vary either the value (#000 to #27272A) or the alpha (rgba(0,0,0,1) to rgba(0,0,0,0)) so the gradient registers as a surface. Use background: linear-gradient(135deg, #000000 0%, #1F1F23 60%, #3F3F46 100%); for a hero. Use background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); for an image scrim that fades from black at the top to fully transparent at the bottom.

Black-to-transparent overlays for images.

Most black gradients on the web are not backgrounds — they are scrims layered on hero photography to make headline text readable. The standard recipe: place a div with linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%) absolutely-positioned over the bottom 60% of an image, then pin headline copy to the top of that overlay. Adjust the starting alpha (0.5 for light photos, 0.85 for busy ones) until the text passes WCAG AA against the average pixel underneath.

Dark mode surfaces — black is not #000.

Pure #000 produces visible halos around text on OLED screens and can feel harsh against most type. Modern dark mode design uses near-blacks (#0B0B0F, #18181B, #27272A) for surface fills and reserves pure #000 for image scrims and hero accents. The Charcoal Velvet and Graphite Studio presets demonstrate this — they look black to the eye but render warmer and easier to read against light type.

Reading on a black gradient.

White text passes WCAG AAA on every preset in this library. The trickier choice is muted text — gray copy can disappear into the gradient's lighter stops. Stay above #cccccc for body copy and above #999999 for captions. Never use mid-grays (#666–#888) on black gradients; they fall into the same value range as the gradient's middle stops and lose legibility.

How to use the black & charcoal gradient library.

Step 1
Choose a recipe
Pick a solid black gradient for surfaces or a black-to-transparent fade for image overlays.
Step 2
Copy the CSS
Tap copy on the preset card to grab the declaration.
Step 3
Layer over content
For scrims, apply the gradient to an absolutely-positioned div over your image with pointer-events: none.

Frequently asked questions.

How do I make a black gradient in CSS?: Use linear-gradient() with two or more black or near-black stops, for example background: linear-gradient(135deg, #000000 0%, #1F1F23 100%);. Vary the lightness across stops so the gradient does not look flat.
How do I make a black-to-transparent gradient?: Use rgba() values instead of hex, for example background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);. This is the standard recipe for hero image scrims.
Why does my black gradient look like a solid color?: If both stops are pure #000000, the gradient renders flat. Shift the second stop to #1F1F23 or #27272A so the gradient has measurable value variation, or use alpha so the gradient fades to transparent.
Which black gradient works best for dark mode cards?: Charcoal Velvet (#0B0B0F → #27272A) and Obsidian Field (#0B0B0F → #1F1F23 → #0B0B0F) are tuned for dark cards — they suggest depth without dropping to pure black where text shimmers on OLED.
Can I layer a black gradient over a video?: Yes, the same scrim recipe used for images works for video. Set the gradient div to pointer-events: none so it does not block playback controls underneath.