Dusty Rose CSS gradient
Muted rose with vintage film texture. 3 CSS layers on #1A0F12, mixed with soft-light and screen. Edit it in the studio below, then copy the code.
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
Dusty Rose,
ready to paste.
Muted rose with vintage film texture. 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.
No presets in this category yet. Pick another filter.
Dusty Rose CSS
.bg-dusty-rose {
background-color: #1A0F12;
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% 30%, rgba(232, 160, 168, 0.8) 0%, rgba(232, 160, 168, 0) 55%),
radial-gradient(circle at 70% 75%, rgba(140, 74, 82, 0.7) 0%, rgba(140, 74, 82, 0) 55%);
background-blend-mode: soft-light, screen, screen;
background-size: cover;
}Colours in Dusty Rose
Where to use it
Dusty Rose 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
New games, tools and tutorials
About one short email a week. No spam, one-click unsubscribe.