Pink gradient

Pink ranges from soft blush to hot magenta. Soft pinks feel friendly and warm; saturated pinks are playful and confident. Below are 12 pink 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)

    Pink two-tone

    #cd568b → #891151
  • Aa · 2.6:1

    Black text: Fails AA — no plain text

    Pink light to deep

    #ffcfe0 → #9d2962
  • Aa · 4.4:1

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

    Pink analogous left

    #ae59b4 → #cc4f6a
  • Aa · 4.7:1

    Black text: Passes AA

    Pink analogous right

    #cd568b → #f17260
  • Aa · 11.9:1

    Black text: Passes AA

    Pink pastel

    #ffdcf2 → #fdbec2
  • Aa · 9.8:1

    White text: Passes AA

    Pink midnight

    #2e0e1c → #7c203e
  • Aa · 4.7:1

    Black text: Passes AA

    Pink neon

    #df5fc8 → #e54151
  • Aa · 1.6:1

    White text: Fails AA — no plain text

    Pink three-step

    #f2b7ec → #c65085 → #6e0d24
  • Aa · 2.0:1

    White text: Fails AA — no plain text

    Pink glow

    #ff99c2 → #671933
  • Aa · 3.0:1

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

    Pink muted

    #bf8ea0 → #87525a
  • Aa · 3.5:1

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

    Pink to white

    #b54076 → #fdf6f9
  • Aa · 5.3:1

    White text: Passes AA

    Pink to black

    #b54076 → #18070e

Using pink gradients well

Good for: beauty and fashion, dating and social apps, playful marketing, sunset themes.

Pairing: Pink → orange gives a sunset; pink → purple → blue is the familiar “Instagram-like” sweep. Blush pinks pair well with deep plum text.

Readable text: Light pinks need dark text; hot pinks around 55% OKLCH lightness pass with white only for large text — go a step darker for body copy. 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 pink gradient?

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

What colours go well with pink in a gradient?

Pink → orange gives a sunset; pink → purple → blue is the familiar “Instagram-like” sweep. Blush pinks pair well with deep plum text.

What text colour is readable on a pink gradient?

Light pinks need dark text; hot pinks around 55% OKLCH lightness pass with white only for large text — go a step darker for body copy. 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 pink 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 pink gradients typically used?

Common uses: beauty and fashion, dating and social apps, playful marketing, sunset themes.

More colour gradients