Skip to content
Musterli

Subtle

Parchment gradient

A radial blend of ivory and pale ochre.

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

  2. Color 2

    Text in black, contrast 14.5: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: #f7f2df;
background-image: radial-gradient(ellipse at 50% 40%, #f7f2df 0%, #f6f1de 11.11%, #f5efdb 22.22%, #f2ebd7 33.33%, #efe6d1 44.44%, #ece1cb 55.56%, #e9dcc6 66.67%, #e6d8c2 77.78%, #e5d6bf 88.89%, #e4d5be 100%);
background-image: radial-gradient(ellipse at 50% 40% in oklch, #f7f2df 0%, #f6f1de 11.11%, #f5efdb 22.22%, #f2ebd7 33.33%, #efe6d1 44.44%, #ece1cb 55.56%, #e9dcc6 66.67%, #e6d8c2 77.78%, #e5d6bf 88.89%, #e4d5be 100%);

Tailwind

bg-[#f7f2df] bg-[radial-gradient(ellipse_at_50%_40%,_#f7f2df_0%,_#f6f1de_11.11%,_#f5efdb_22.22%,_#f2ebd7_33.33%,_#efe6d1_44.44%,_#ece1cb_55.56%,_#e9dcc6_66.67%,_#e6d8c2_77.78%,_#e5d6bf_88.89%,_#e4d5be_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

  • Dawn Gray

    A gray with a warm start and a cool end, like the sky before sunrise.

  • Slate

    Medium to dark blue gray, matter of fact and modern.

  • Sea of Fog

    Pale, almost neutral gray with a touch of blue, like fog over the lowlands.

  • Linen

    Warm natural white, ideal as a quiet page background.

  • Pebble

    Warm light gray turning into cool gray.

  • Alpenglow

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