Skip to content
Musterli

Cool

Rhine Falls gradient

Spray white, water green and deep blue in one long blend.

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

  2. Color 2

    Text in black, contrast 9.4:1

  3. Color 3

    Text in white, contrast 6.3: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: #dcf9f8;
background-image: linear-gradient(170deg, #dcf9f8 0%, #d8f7f6 5.56%, #ccf2f2 11.11%, #baebea 16.67%, #a3e1e2 22.22%, #89d7d9 27.78%, #6fced1 33.33%, #58c6cb 38.89%, #45c1c7 44.44%, #3ebfc6 50%, #3cbcc4 55.56%, #37b4be 61.11%, #30a9b4 66.67%, #279aa9 72.22%, #1f8b9c 77.78%, #167e90 83.33%, #0f7386 88.89%, #0b6b7f 94.44%, #09697d 100%);
background-image: linear-gradient(170deg in oklch, #dcf9f8 0%, #d8f7f6 5.56%, #ccf2f2 11.11%, #baebea 16.67%, #a3e1e2 22.22%, #89d7d9 27.78%, #6fced1 33.33%, #58c6cb 38.89%, #45c1c7 44.44%, #3ebfc6 50%, #3cbcc4 55.56%, #37b4be 61.11%, #30a9b4 66.67%, #279aa9 72.22%, #1f8b9c 77.78%, #167e90 83.33%, #0f7386 88.89%, #0b6b7f 94.44%, #09697d 100%);

Tailwind

bg-[#dcf9f8] bg-[linear-gradient(170deg,_#dcf9f8_0%,_#d8f7f6_5.56%,_#ccf2f2_11.11%,_#baebea_16.67%,_#a3e1e2_22.22%,_#89d7d9_27.78%,_#6fced1_33.33%,_#58c6cb_38.89%,_#45c1c7_44.44%,_#3ebfc6_50%,_#3cbcc4_55.56%,_#37b4be_61.11%,_#30a9b4_66.67%,_#279aa9_72.22%,_#1f8b9c_77.78%,_#167e90_83.33%,_#0f7386_88.89%,_#0b6b7f_94.44%,_#09697d_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

  • Foehn Sky

    Clear sky blue that tips into a soft violet.

  • Peppermint

    Pale mint to cool turquoise, light and clean.

  • Glacier

    Almost white ice blue that deepens into a strong blue towards the bottom.

  • Mountain Lake

    Clear turquoise and cool blue, like a lake on a summer morning.

  • North Wind

    A restrained blue gray, fresh and easy to read text on.

  • Candy Floss

    Soft pink and lilac blue, playful and gentle.