Skip to content
Musterli

Pastel

Soap Bubble gradient

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

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.7:1

  2. Color 2

    Text in black, contrast 17.1:1

  3. Color 3

    Text in black, contrast 15.9: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: #f9d4f5;
background-image: conic-gradient(from 30deg at 50% 50%, #f9d4f5 0%, #fbd4f3 3.7%, #ffd4eb 7.41%, #ffd7e1 11.11%, #ffdad8 14.81%, #ffddcf 18.52%, #ffe0c4 22.22%, #fce3ba 25.93%, #f6e7bb 29.63%, #f4e8bb 33.33%, #f2e9bb 37.04%, #eaeabc 40.74%, #dfecc0 44.44%, #d0eec7 48.15%, #c2efd2 51.85%, #b8eedd 55.56%, #b2ede6 59.26%, #afecec 62.96%, #afebee 66.67%, #afebf1 70.37%, #b1eaf8 74.07%, #bae6ff 77.78%, #cae2ff 81.48%, #d7deff 85.19%, #e4daff 88.89%, #f0d6fd 92.59%, #f7d4f7 96.3%, #f9d4f5 100%);
background-image: conic-gradient(from 30deg at 50% 50% in oklch, #f9d4f5 0%, #fbd4f3 3.7%, #ffd4eb 7.41%, #ffd7e1 11.11%, #ffdad8 14.81%, #ffddcf 18.52%, #ffe0c4 22.22%, #fce3ba 25.93%, #f6e7bb 29.63%, #f4e8bb 33.33%, #f2e9bb 37.04%, #eaeabc 40.74%, #dfecc0 44.44%, #d0eec7 48.15%, #c2efd2 51.85%, #b8eedd 55.56%, #b2ede6 59.26%, #afecec 62.96%, #afebee 66.67%, #afebf1 70.37%, #b1eaf8 74.07%, #bae6ff 77.78%, #cae2ff 81.48%, #d7deff 85.19%, #e4daff 88.89%, #f0d6fd 92.59%, #f7d4f7 96.3%, #f9d4f5 100%);

Tailwind

bg-[#f9d4f5] bg-[conic-gradient(from_30deg_at_50%_50%,_#f9d4f5_0%,_#fbd4f3_3.7%,_#ffd4eb_7.41%,_#ffd7e1_11.11%,_#ffdad8_14.81%,_#ffddcf_18.52%,_#ffe0c4_22.22%,_#fce3ba_25.93%,_#f6e7bb_29.63%,_#f4e8bb_33.33%,_#f2e9bb_37.04%,_#eaeabc_40.74%,_#dfecc0_44.44%,_#d0eec7_48.15%,_#c2efd2_51.85%,_#b8eedd_55.56%,_#b2ede6_59.26%,_#afecec_62.96%,_#afebee_66.67%,_#afebf1_70.37%,_#b1eaf8_74.07%,_#bae6ff_77.78%,_#cae2ff_81.48%,_#d7deff_85.19%,_#e4daff_88.89%,_#f0d6fd_92.59%,_#f7d4f7_96.3%,_#f9d4f5_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

  • 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.

  • Macaron

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

  • Kingfisher

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