Skip to content
Musterli

Pastel

Macaron gradient

Pink, vanilla and pistachio side by side, like in a pastry shop.

Customize in the editor

Change angle, shape and colors, then export as CSS, SVG or PNG.

Colors

The color stops of the gradient. Click a value to copy it.

  1. Color 1

    Text in black, contrast 15.8:1

  2. Color 2

    Text in black, contrast 17.7:1

  3. Color 3

    Text in black, contrast 16.0:1

Code

Paste the lines into your element's rule. The first line is a fallback color, the second the gradient for every browser, the third interpolates in OKLCH for modern browsers.

CSS

background-color: #fed6da;
background-image: linear-gradient(120deg, #fed6da 0%, #ffd6d9 5.56%, #ffd8d6 11.11%, #ffdbd2 16.67%, #ffdecd 22.22%, #ffe1c7 27.78%, #fee5bf 33.33%, #f9e9be 38.89%, #f5ecbf 44.44%, #f4edbf 50%, #f2edbf 55.56%, #edeebf 61.11%, #e4eec1 66.67%, #d9eec4 72.22%, #ceeec9 77.78%, #c4eece 83.33%, #bdedd3 88.89%, #b8ecd7 94.44%, #b7ecd8 100%);
background-image: linear-gradient(120deg in oklch, #fed6da 0%, #ffd6d9 5.56%, #ffd8d6 11.11%, #ffdbd2 16.67%, #ffdecd 22.22%, #ffe1c7 27.78%, #fee5bf 33.33%, #f9e9be 38.89%, #f5ecbf 44.44%, #f4edbf 50%, #f2edbf 55.56%, #edeebf 61.11%, #e4eec1 66.67%, #d9eec4 72.22%, #ceeec9 77.78%, #c4eece 83.33%, #bdedd3 88.89%, #b8ecd7 94.44%, #b7ecd8 100%);

Tailwind

bg-[#fed6da] bg-[linear-gradient(120deg,_#fed6da_0%,_#ffd6d9_5.56%,_#ffd8d6_11.11%,_#ffdbd2_16.67%,_#ffdecd_22.22%,_#ffe1c7_27.78%,_#fee5bf_33.33%,_#f9e9be_38.89%,_#f5ecbf_44.44%,_#f4edbf_50%,_#f2edbf_55.56%,_#edeebf_61.11%,_#e4eec1_66.67%,_#d9eec4_72.22%,_#ceeec9_77.78%,_#c4eece_83.33%,_#bdedd3_88.89%,_#b8ecd7_94.44%,_#b7ecd8_100%)]

Take the gradient further

The same colors in other generators. Each card opens the editor with these colors.

Keep working with the colors

Turn the color stops into a palette or a full color scale.

How to use this gradient

Copy the CSS into the rule of the element that should carry the gradient, for example a section, a card or a button. For text on top, pick a text color with enough contrast on every color stop; the values next to the colors help you with that. In the editor you change angle, shape and easing and can also export the gradient as an image.

Similar gradients

All gradients

  • Soap Bubble

    A conic blend of shimmering pastels that closes into a full circle.

  • Candy Floss

    Soft pink and lilac blue, playful and gentle.

  • Morning Dew

    A hint of green and a hint of blue, barely there and very fresh.

  • Kingfisher

    Bright blue with an orange accent, like the bird's plumage.