Red gradient

Red is the loudest hue on screen: urgent, energetic and warm. In gradients it works best moving toward orange or deep crimson rather than toward green or blue, which pass through brown or grey. Below are 12 red gradients — copy the CSS, download a PNG, or open one in the editor.

  • Aa · 4.0:1

    White text: Fails AA — large text only (3:1)

    Red two-tone

    #e64343 → #940014
  • Aa · 2.6:1

    Black text: Fails AA — no plain text

    Red light to deep

    #ffd1cd → #b2001b
  • Aa · 4.3:1

    White text: Fails AA — large text only (3:1)

    Red analogous left

    #d43b86 → #d84b00
  • Aa · 4.7:1

    Black text: Passes AA

    Red analogous right

    #e64343 → #e68100
  • Aa · 12.0:1

    Black text: Passes AA

    Red pastel

    #ffdee2 → #ffc1a5
  • Aa · 9.9:1

    White text: Passes AA

    Red midnight

    #340909 → #821d00
  • Aa · 4.8:1

    Black text: Passes AA

    Red neon

    #ff4886 → #d16100
  • Aa · 1.6:1

    White text: Fails AA — no plain text

    Red three-step

    #ffb6cb → #de3b3d → #632500
  • Aa · 2.0:1

    White text: Fails AA — no plain text

    Red glow

    #ffa098 → #6c1700
  • Aa · 3.0:1

    Black text: Fails AA — no plain text

    Red muted

    #cc8b85 → #8e503a
  • Aa · 3.5:1

    Black text: Fails AA — large text only (3:1)

    Red to white

    #cc272e → #fff6f5
  • Aa · 5.4:1

    White text: Passes AA

    Red to black

    #cc272e → #1b0605

Using red gradients well

Good for: sale banners, food and sport brands, alert states, bold hero sections.

Pairing: Red → orange and red → magenta are the cleanest blends. Keep red away from large areas of saturated green — the pair vibrates and is hard for red-green colour-blind users to separate.

Readable text: Mid and dark reds pass with white text; very bright reds such as #ff3b30 sit near 3.5:1 with white, so use them for large text only. 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 red gradient?

A simple red gradient is background: linear-gradient(in oklch 135deg, #e64343 0%, #940014 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.

What colours go well with red in a gradient?

Red → orange and red → magenta are the cleanest blends. Keep red away from large areas of saturated green — the pair vibrates and is hard for red-green colour-blind users to separate.

What text colour is readable on a red gradient?

Mid and dark reds pass with white text; very bright reds such as #ff3b30 sit near 3.5:1 with white, so use them for large text only. 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 red 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 red gradients typically used?

Common uses: sale banners, food and sport brands, alert states, bold hero sections.

More colour gradients