Red and Black Background CSS

Live Red and Black Background Examples

background: linear-gradient(135deg, #ff0000 0%, #000000 100%);

background: radial-gradient(circle, #ff0000 0%, #000000 70%);

background: repeating-linear-gradient(
    45deg,
    #ff0000,
    #ff0000 10px,
    #000000 10px,
    #000000 20px
);

background: #000000;
background-image: 
    radial-gradient(circle at 25% 25%, #ff0000 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, #ff0000 0%, transparent 50%);

background: linear-gradient(90deg, #000000 0%, #ff0000 50%, #000000 100%);
background-size: 200% 100%; /* without this, background-position has nothing to move */
animation: slideGradient 3s ease-in-out infinite;

@keyframes slideGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

background: 
    linear-gradient(0deg, rgba(255,0,0,0.1) 0%, rgba(0,0,0,0.9) 100%),
    radial-gradient(circle, #ff0000 1.5px, transparent 1.5px) #000;
background-size: 100% 100%, 10px 10px;

background: conic-gradient(from 0deg, #ff0000, #000000, #ff0000);
animation: rotate 4s linear infinite;

background: 
    radial-gradient(ellipse at top, #ff0000 0%, transparent 50%),
    radial-gradient(ellipse at bottom, #000000 0%, transparent 50%),
    #1a0000;

Advanced Techniques

background: 
    linear-gradient(135deg, rgba(255,0,0,0.8) 0%, rgba(0,0,0,0.9) 100%),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KPGZpbHRlciBpZD0ibm9pc2UiPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSI0IiAvPgo8L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuNCIvPgo8L3N2Zz4='),
    #000000;
background-blend-mode: overlay, normal, normal;

:root {
    --red-primary: #ff0000;
    --red-dark: #cc0000;
    --black-primary: #000000;
    --black-secondary: #1a1a1a;
}

.dynamic-background {
    background: linear-gradient(
        135deg, 
        var(--red-primary) 0%, 
        var(--black-primary) 100%
    );
    transition: all 0.3s ease;
}

.dynamic-background:hover {
    --red-primary: #ff3333;
    --black-primary: #0a0a0a;
}

Choosing the Right Red for a Dark Palette

Red sits in a wide gamut. #ff0000 is the loudest possible red on a screen and works for short-form impact, but on long stretches it tends to vibrate against deep blacks and tire the eye. For large areas behind content, drop saturation: #cc1f1f, #b00020, or a brick like #8b1a1a still read as red while letting the page breathe. These darker reds are surface colours, not text colours: on black they measure only 3.78:1, 2.87:1 and 2.26:1. As a rule of thumb, take whatever red you start with and reduce its lightness by 15–25% if it will sit behind body copy for more than a sentence or two.

The other lever is hue. Pulling red toward orange (about 10–15° on the hue wheel) reads as warm and inviting; pulling it toward magenta reads as urgent or premium. Lock the hue once and use lightness/saturation variants for layering instead of mixing several reds — that's where the palette starts to look muddy.

Three Reliable Red-on-Black Layouts

Most production red-on-black designs are built from one of these three structures:

1. Black hero with a single red accent. Solid #000 background, red used only on a CTA button, link underline, or section divider. Cheap, performs well, and never visually overwhelms.
2. Diagonal red-to-black gradient with a dark photo overlay. A 135° linear gradient from a dimmed red into pure black, layered on top of a desaturated background image. Use background-blend-mode: multiply to keep the photo from competing with the gradient.
3. Pulsing radial accent on flat black. A single soft radial-gradient sitting under hero copy, plus a slow opacity animation. The contrast between flat sides and a glowing center pulls the eye where you want it.

Common Mistakes

• Pure red text on pure black. #ff0000 technically passes AA (5.25:1), but saturated red on black can appear to shimmer or sit at a different depth from surrounding text (chromostereopsis), which is tiring over long passages. Use off-white text for body copy and reserve red for emphasis.
• Banded gradients. Two-stop gradients between similar lightness values (e.g. #ff0000 → #990000) often show visible banding on 8-bit displays. Add a third middle stop or a tiny noise texture overlay to break the bands.
• Animations that don't respect motion preferences. Wrap pulse and shake animations in @media (prefers-reduced-motion: no-preference) so users who ask for less motion don't get them. Autoplaying motion that lasts more than five seconds also needs a way to pause it (WCAG 2.2.2).
• Over-saturated red on warm-tone displays. Test the page on a phone in night mode. A red that reads "rich" on a calibrated monitor can look orange and angry on a warm-shifted phone.

Accessibility Checklist for Red on Black

The high-saturation reds on this page are mostly accent colors, not body-text colors. The red palette below shows which reds clear WCAG AA at body-copy sizes and which only pass for large text or icons; the accessible dark backgrounds guide covers the general rules.

• Verify body text against the darkest background reaches at least 4.5:1 contrast (WCAG AA). White text passes; mid-grey often does not.
• Pure red (#ff0000) on black has 5.25:1 contrast, which passes AA but not AAA (7:1). Lighten or shift toward salmon (#ff6b6b, 7.57:1) for small body copy.
• Don't rely on red alone to signal state (errors, alerts). Pair it with an icon or a label so colorblind users get the message.
• Run the design through a deuteranopia simulator. Red-and-black layouts often collapse to brown-and-black for users with red-green colorblindness, which can wipe out the visual hierarchy.

For broader guidance on contrast and dark-mode behaviour across colored palettes, see our dark backgrounds guide and responsive backgrounds. For a higher-energy take on the same scheme, the animated backgrounds page covers movement that pairs well with this palette.