Faded Denim CSS gradient

Washed indigo, worn at the edges. 3 CSS layers on #141C2B, mixed with soft-light 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

Faded Denim,
ready to paste.

Washed indigo, worn at the edges. 3 layers mixed with soft-light and screen. Open it in the editor to tune each layer, then take the code as CSS, Tailwind, SVG or HTML.

Faded Denim CSS

.bg-faded-denim {
  background-color: #141C2B;
  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.9%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.3%22%2F%3E%3C%2Fsvg%3E'),
    radial-gradient(circle at 30% 28%, rgba(110, 140, 184, 0.8) 0%, rgba(110, 140, 184, 0) 55%),
    radial-gradient(circle at 72% 78%, rgba(43, 58, 85, 0.75) 0%, rgba(43, 58, 85, 0) 58%);
  background-blend-mode: soft-light, screen, screen;
  background-size: cover;
}

Colours in Faded Denim

#141C2B#6E8CB8#2B3A55

Where to use it

Faded Denim is a grain gradient on a dark base. Use it for dark-mode heroes, app splash screens and video thumbnails, with white or very light text on top.

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
Old PaperFoxed cream with soft shadowing
Ash VioletCool ash with a violet cast

New games, tools and tutorials

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