Concrete CSS gradient
Flat grey with an honest texture. 3 CSS layers on #B8B6B0, mixed with multiply 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
Concrete,
ready to paste.
Flat grey with an honest texture. 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.
No presets in this category yet. Pick another filter.
Concrete CSS
.bg-concrete {
background-color: #B8B6B0;
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%221.1%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.28%22%2F%3E%3C%2Fsvg%3E'),
radial-gradient(circle at 75% 80%, rgba(138, 136, 128, 0.55) 0%, rgba(138, 136, 128, 0) 60%),
radial-gradient(circle at 25% 20%, rgba(214, 212, 206, 0.5) 0%, rgba(214, 212, 206, 0) 55%);
background-blend-mode: multiply, multiply, screen;
background-size: cover;
}Colours in Concrete
Where to use it
Concrete 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
New games, tools and tutorials
About one short email a week. No spam, one-click unsubscribe.