Purple gradient

Purple sits between the calm of blue and the energy of red, so it reads as creative, premium and a little magical — a staple of music, gaming and AI products. Below are 12 purple gradients — copy the CSS, download a PNG, or open one in the editor.

  • Aa · 3.9:1

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

    Purple two-tone

    #9867e1 → #5f279e
  • Aa · 2.6:1

    Black text: Fails AA — no plain text

    Purple light to deep

    #e3d6ff → #6f3bb2
  • Aa · 4.4:1

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

    Purple analogous left

    #5874ea → #a758c8
  • Aa · 4.8:1

    Black text: Passes AA

    Purple analogous right

    #9867e1 → #e06dca
  • Aa · 11.9:1

    Black text: Passes AA

    Purple pastel

    #e5e5ff → #e9c0f2
  • Aa · 9.9:1

    White text: Passes AA

    Purple midnight

    #1f1233 → #5f2980
  • Aa · 4.6:1

    Black text: Passes AA

    Purple neon

    #8688ff → #c545ce
  • Aa · 1.6:1

    White text: Fails AA — no plain text

    Purple three-step

    #bfcbff → #9260da → #591467
  • Aa · 1.9:1

    White text: Fails AA — no plain text

    Purple glow

    #c9acff → #4e216a
  • Aa · 3.0:1

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

    Purple muted

    #a595c5 → #755583
  • Aa · 3.6:1

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

    Purple to white

    #8451c9 → #f9f7fe
  • Aa · 5.2:1

    White text: Passes AA

    Purple to black

    #8451c9 → #10091a

Using purple gradients well

Good for: creative tools, gaming and streaming, AI and crypto landing pages, night themes.

Pairing: Purple → pink and purple → blue are the classic smooth blends. Purple with a small amount of gold or lime makes a strong complementary accent.

Readable text: Most mid-to-deep purples carry white text at 4.5:1; lavender tints need dark text. 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 purple gradient?

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

What colours go well with purple in a gradient?

Purple → pink and purple → blue are the classic smooth blends. Purple with a small amount of gold or lime makes a strong complementary accent.

What text colour is readable on a purple gradient?

Most mid-to-deep purples carry white text at 4.5:1; lavender tints need dark text. 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 purple 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 purple gradients typically used?

Common uses: creative tools, gaming and streaming, AI and crypto landing pages, night themes.

More colour gradients