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.
On this page
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.
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.
Sport and fight night
Hot red rising from below, as if the floor of the arena is lit. Loud, physical and urgent.
Gaming
Sharp diagonals and hard stops, closer to a graphic than a glow. These read as fast and aggressive.
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.
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.
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 explains the mechanics.
- 1
Add fine grain
A light noise layer breaks up the steps. 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 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.
#0a0a0aText
#fef2f2Contrast
Verdict
#0a0a0aText
#ef4444Contrast
Verdict
#ef4444Text
Contrast
Verdict
#dc2626Text
Contrast
Verdict
#b91c1cText
Contrast
Verdict
#7f1d1dText
Contrast
Verdict
A boxing gym post with red rising from the floor and bone white type above it.
A cinema story lit by a single red side light.
Red and black gradient 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%);
}For more deep reds, see red gradients and burgundy gradients. 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.
Questions people ask
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.
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