Old Paper CSS gradient

Foxed cream with soft shadowing. 3 CSS layers on #EFE6D2, mixed with multiply and screen. Edit it in the studio below, then copy the code.

Gradient Studio couldn't load its presets.

It needs a live connection to CrunchCube. Check your internet connection and reload, or open the studio at crunchcube.in.

CSS gradients · blend modes · Tailwind · 40 presets

Old Paper,
ready to paste.

Foxed cream with soft shadowing. 3 layers mixed with multiply and screen. Open it in the editor to tune each layer, then take the code as CSS, Tailwind, SVG or HTML.

Old Paper CSS

.bg-old-paper {
  background-color: #EFE6D2;
  background-image:
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.95%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.26%22%2F%3E%3C%2Fsvg%3E'),
    radial-gradient(circle at 80% 80%, rgba(201, 180, 140, 0.6) 0%, rgba(201, 180, 140, 0) 58%),
    radial-gradient(circle at 25% 22%, rgba(255, 251, 240, 0.7) 0%, rgba(255, 251, 240, 0) 50%);
  background-blend-mode: multiply, multiply, screen;
  background-size: cover;
}

Colours in Old Paper

#EFE6D2#C9B48C#FFFBF0

Where to use it

Old Paper is a grain gradient on a light base. Use it for hero sections, pricing cards and soft placeholders on light pages. Dark text reads well on top, but check contrast where the strongest colours sit.

New to layered gradients? Here's how the CSS works.

More grain gradients

Dusty RoseMuted rose with vintage film texture
Film SepiaWarm monochrome, heavy stock
ConcreteFlat grey with an honest texture
Faded DenimWashed indigo, worn at the edges
Ash VioletCool ash with a violet cast

New games, tools and tutorials

About one short email a week. No spam, one-click unsubscribe.