Skip to content
Musterli

Warm

Terracotta gradient

From pale clay to burnt reddish brown, earthy and calm.

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

  2. Color 2

    Text in black, contrast 5.9:1

  3. Color 3

    Text in white, contrast 7.8: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: #f0dac2;
background-image: linear-gradient(180deg, #f0dac2 0%, #efd7be 5.56%, #ebceb2 11.11%, #e6c1a1 16.67%, #e0b08d 22.22%, #d99e79 27.78%, #d38c67 33.33%, #cd7e5a 38.89%, #c97452 44.44%, #c8714f 50%, #c66f4e 55.56%, #c06b4b 61.11%, #b66446 66.67%, #ab5b41 72.22%, #9f523b 77.78%, #944a35 83.33%, #8b4431 88.89%, #853f2e 94.44%, #833e2d 100%);
background-image: linear-gradient(180deg in oklch, #f0dac2 0%, #efd7be 5.56%, #ebceb2 11.11%, #e6c1a1 16.67%, #e0b08d 22.22%, #d99e79 27.78%, #d38c67 33.33%, #cd7e5a 38.89%, #c97452 44.44%, #c8714f 50%, #c66f4e 55.56%, #c06b4b 61.11%, #b66446 66.67%, #ab5b41 72.22%, #9f523b 77.78%, #944a35 83.33%, #8b4431 88.89%, #853f2e 94.44%, #833e2d 100%);

Tailwind

bg-[#f0dac2] bg-[linear-gradient(180deg,_#f0dac2_0%,_#efd7be_5.56%,_#ebceb2_11.11%,_#e6c1a1_16.67%,_#e0b08d_22.22%,_#d99e79_27.78%,_#d38c67_33.33%,_#cd7e5a_38.89%,_#c97452_44.44%,_#c8714f_50%,_#c66f4e_55.56%,_#c06b4b_61.11%,_#b66446_66.67%,_#ab5b41_72.22%,_#9f523b_77.78%,_#944a35_83.33%,_#8b4431_88.89%,_#853f2e_94.44%,_#833e2d_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

  • Cinnamon Star

    Pale cream, cinnamon and dark cocoa, as cozy as holiday baking.

  • Alpenglow

    Warm yellow, orange and rose red like the last light on the peaks.

  • Apricot

    A gentle blend from creamy pale yellow to ripe apricot orange.

  • Embers

    A radial blend from golden yellow through orange to deep red, like glowing coals.

  • Pumpkin Patch

    Strong yellow and rich orange, running from left to right.

  • Glacier

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