# Red and black gradients: dramatic codes that don't band

[Canonical HTML page](https://gradiently.design/guide/red-black-gradient)

Red against black is the most dramatic pairing in colour. It can feel like a cinema foyer, a title fight or a horror poster. These codes give you the drama and keep the control.

## The short version

- A red and black gradient fades a red such as #dc2626 or #b91c1c into near black, usually through a deep blood red such as #450a0a.
- Fading red through dark crimson rather than straight to black keeps the transition rich and avoids a brown or grey band.
- Red and black gradients band heavily in compressed images and video, so add grain and avoid large, smooth, low contrast areas.
- White text reads well on deep red and black, while saturated mid reds need large, bold type for white to work.
- The pairing suits film, sport, gaming, fashion, nightlife and Halloween, and works best with one strong light source rather than red spread evenly.

A **red and black gradient** fades a bright red like `#dc2626` or a deeper crimson like `#b91c1c` into near black, ideally through a blood red like `#450a0a` so the transition stays rich. Few pairings are as dramatic: red grabs attention and black gives it nothing to compete with. Here are red and black codes for five kinds of drama, how to stop them banding, and the text colours that work.

## How to fade red into black without brown

The common mistake is blending pure red straight into pure black in two stops. The middle of that blend is a murky brown red that looks dirty rather than dark. Step through darker reds instead, and use a black with a trace of red in it, so the shadow belongs to the same family as the light.

- Bone white: #fef2f2
- Signal red light: #f87171
- Scarlet: #ef4444
- Red: #dc2626
- Crimson: #b91c1c
- Oxide: #7f1d1d
- Blood: #450a0a
- Black: #0a0a0a

A red to black ramp, with a bone white for type. Use three or four adjacent swatches in any one gradient.

- Two stops: muddy middle: `linear-gradient(180deg, #dc2626 0%, #000000 100%)`
- Stepped: rich all the way: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`

The same red and the same darkness. The stepped version passes through crimson and blood red instead of brown.

## Red and black gradient codes for five kinds of drama

### Cinema and thriller

Mostly black, with red arriving as a single light from the side, like an exit sign in a dark room. Quiet and tense.

- Side light: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)`
- Red edge: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)`

### Sport and fight night

Hot red rising from below, as if the floor of the arena is lit. Loud, physical and urgent.

- Arena floor: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)`
- Heat rising: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)`

### Gaming

Sharp diagonals and hard stops, closer to a graphic than a glow. These read as fast and aggressive.

- Hard split: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)`
- Scanline pattern: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)`

### Fashion and luxury

Deep crimson and lacquer black, with almost no bright red. Think of a lacquered box or a red silk lining: polished, expensive and controlled.

- Lacquer: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)`
- Crimson velvet: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)`

### Halloween and horror

Red that pools at the bottom of the frame or seeps in from the corners. Use sparingly and it is genuinely unsettling; overdo it and it looks like a costume shop.

- Pooling: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)`
- Red vignette: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)`

Ten codes across five moods. In each, red occupies one region and black holds the rest. [Halloween graphics](https://gradiently.design/guide/halloween-graphics) has more seasonal ideas.

## Why red and black gradients band, and how to stop it

Dark, smooth gradients have very few distinct shades to work with, so they break into visible steps, especially after an app recompresses them. Saturated red makes it worse in video, because most video formats store colour at a lower resolution than brightness, and red edges smear. [Gradient banding](https://gradiently.design/guide/gradient-banding) explains the mechanics.

1. **Add fine grain** A light noise layer breaks up the steps. [Grainy gradients](https://gradiently.design/guide/grainy-gradients) has a ready to use recipe.
2. **Export at full size** Upload at the platform's own size, such as 1080×1350 for an Instagram post, so it is not scaled and compressed twice.
3. **Prefer PNG for stills** PNG avoids the blocky artefacts JPEG creates in dark, smooth areas.
4. **Keep some texture in video** A perfectly smooth red fade is the hardest thing for a video encoder. A little movement or grain survives far better.

## How much red to use with black

Red carries strong associations: danger, heat, passion, urgency, and in many places luck and celebration. Next to black those meanings get louder, so proportion decides whether a design feels dramatic or alarming. [Red colour meaning](https://gradiently.design/guide/red-color-meaning) covers the associations in more depth.

### Alarming

- Red spread evenly over the whole frame
- Bright red behind small white text
- Red, black and a third loud colour
- Red glow on every word

### Dramatic

- Black holding most of the frame, red in one region
- Deep crimson behind type, bright red kept away
- Red, black and a quiet bone white
- Plain type, with the light doing the work

## Text colours on red and black

On the black end, nearly anything light reads. On the red end, it depends on how deep the red is. Bright scarlet is lighter than people think, so white text there should be big and bold. Ratios use the WCAG formula, where 4.5:1 is the target for small text.

| Background | Text | Contrast | Verdict |
| --- | --- | --- | --- |
| Black `#0a0a0a` | Bone white `#fef2f2` | 18.1:1 | Excellent |
| Black `#0a0a0a` | Scarlet `#ef4444` | 5.3:1 | Good for headlines in red |
| Scarlet `#ef4444` | White | 3.8:1 | Large, bold type only |
| Red `#dc2626` | White | 4.8:1 | Good |
| Crimson `#b91c1c` | White | 6.5:1 | Good |
| Oxide `#7f1d1d` | White | 10.0:1 | Excellent |

Red text on black is legible, but keep it for headlines; long passages in saturated red are tiring to read.

A portrait fight night poster with white lettering over black, with red light rising from the bottom of the frame

A boxing gym post with red rising from the floor and bone white type above it.

A vertical cinema story with pale lettering on black, lit from one side by a deep red glow

A cinema story lit by a single red side light.

## Red and black gradient CSS

```css
.drama {
  background-color: #0a0505;
  background-image:
    radial-gradient(ellipse at 50% 110%, #dc2626 0%, transparent 45%),
    linear-gradient(180deg, #0a0a0a 0%, #2a0606 70%, #450a0a 100%);
  color: #fef2f2;
}

.split {
  background: linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%);
}
```

A dark section lit with red from below, and a hard diagonal split. Two stops at the same position make a sharp edge.

For more deep reds, see [red gradients](https://gradiently.design/guide/red-gradient) and [burgundy gradients](https://gradiently.design/guide/maroon-gradient). If red and black is central to your brand, claim a Gradiently Mark and nobody else can export it. It renders at every size from a story to a stream banner, and moves its calmest dark region behind your words automatically.

## FAQ

### What is a good red and black gradient code?

A rich one is `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. It steps through crimson and blood red instead of going brown.

### Why does my red to black gradient look brown?

A two stop blend from pure red to pure black passes through a murky brown red. Add crimson and blood red stops, and use a black with a trace of red.

### What text colour goes on a red and black gradient?

White or a warm bone white reads well on black and on deep reds. On bright scarlet, use white only in large, bold type.

### How do I make a hard split red and black background in CSS?

Put two stops at the same position: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` creates a sharp diagonal edge.

### How do I stop banding in a dark red gradient?

Add fine grain, export at the platform's own size and use PNG for stills. Dark, smooth red fades band more than almost any other gradient.