Pastel gradient

Pastel gradients mix very light, low-chroma colours such as peach, lilac, mint and baby blue. Blending in OKLCH keeps the middle soft instead of turning grey. Below are 12 pastel gradients — copy the CSS, download a PNG, or open one in the editor.

Quick copy — pastel peach to lilac:

background: linear-gradient(135deg, #ffd4bc 0%, #ffd2c0 8.3%, #ffcfc4 16.7%, #ffcdc8 25%, #ffcacd 33.3%, #ffc8d2 41.7%, #fcc7d8 50%, #f9c6dd 58.3%, #f4c5e3 66.7%, #efc5e9 75%, #e9c5ee 83.3%, #e2c5f3 91.7%, #dbc6f7 100%); background: linear-gradient(in oklch 135deg, #ffd4bc 0%, #dbc6f7 100%);
  • Aa · 12.0:1

    Black text: Passes AA

    Pastel peach to lilac

    #ffd4bc → #dbc6f7
  • Aa · 13.2:1

    Black text: Passes AA

    Pastel mint to sky

    #bdf7dc → #b2dffa
  • Aa · 12.7:1

    Black text: Passes AA

    Pastel cotton candy

    #fcc5de → #b4defc
  • Aa · 14.3:1

    Black text: Passes AA

    Pastel lemon to mint

    #fbf1b2 → #b6edce
  • Aa · 11.9:1

    Black text: Passes AA

    Pastel blush

    #ffe8e7 → #f9becf
  • Aa · 10.5:1

    Black text: Passes AA

    Pastel lavender

    #e4e1fe → #ccb9f1
  • Aa · 13.6:1

    Black text: Passes AA

    Pastel sunrise

    #f6d0f1 → #ffddc3 → #fbf1b2
  • Aa · 11.5:1

    Black text: Passes AA

    Pastel ocean

    #bfeff2 → #b0ccf9
  • Aa · 12.0:1

    Black text: Passes AA

    Pastel rainbow

    #ffc7c6 → #fde0b0 → #c4f2cc → #b4defc → #d8c7f9
  • Aa · 11.9:1

    Black text: Passes AA

    Pastel glow

    #fff0d7 → #ecc1e7
  • Aa · 12.7:1

    Black text: Passes AA

    Pastel aqua to pink

    #b0ebe7 → #fac6e2
  • Aa · 11.6:1

    Black text: Passes AA

    Pastel coral to white

    #febbaf → #faf4ef

Using pastel gradients well

Good for: kids and baby brands, wellness and journaling apps, soft hero sections, illustration backgrounds and social posts.

Pairing: Two or three pastels with neighbouring hues look calm; opposite pastels (peach and mint) look playful. Add one dark text colour, such as a deep plum or navy, for contrast.

Readable text: Pastels are light by definition, so near-black or deep-coloured text passes easily and white text almost never does. 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 pastel gradient?

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

What colours go well with pastel in a gradient?

Two or three pastels with neighbouring hues look calm; opposite pastels (peach and mint) look playful. Add one dark text colour, such as a deep plum or navy, for contrast.

What text colour is readable on a pastel gradient?

Pastels are light by definition, so near-black or deep-coloured text passes easily and white text almost never does. 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 pastel 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 pastel gradients typically used?

Common uses: kids and baby brands, wellness and journaling apps, soft hero sections, illustration backgrounds and social posts.

More colour gradients