Pastel CSS Gradient Generator

A soft pastel CSS gradient that drifts across gentle pink, lilac and mint. Light and low-contrast, it makes a calm background for cards, landing pages and print-style layouts. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.

Type

Angle (120°)

Interpolation color space

Color stops

50%

100%

CSS

background: linear-gradient(in oklch 120deg, #fbcfe8 0%, #ddd6fe 50%, #bbf7d0 100%);

Tailwind v4 (@theme)

Use it as bg-(image:--gradient-brand)

@theme {
  --gradient-brand: linear-gradient(in oklch 120deg, #fbcfe8 0%, #ddd6fe 50%, #bbf7d0 100%);
}

About the pastel gradient

Pastel gradients use high-lightness, low-saturation colors so the blend stays soft and never fights the content on top of it. This preset flows through a pale pink, a light lilac and a mint green for an airy, friendly feel. Because the colors are so close in lightness, OKLCH interpolation keeps the transition smooth without banding. Copy the CSS or the Tailwind v4 @theme token straight from the generator.

The CSS for this gradient:

background: linear-gradient(in oklch 120deg, #fbcfe8 0%, #ddd6fe 50%, #bbf7d0 100%);

Frequently Asked Questions

A pastel gradient blends soft, desaturated colors with high lightness, such as pale pink, lilac and mint. The low contrast keeps it gentle and easy to place text over, which is why pastels are popular for backgrounds.

Keep every stop at a similar high lightness and low saturation, and interpolate in OKLCH. Mixing a pastel with a fully saturated color breaks the soft feel, so stay within the pale range for a consistent result.