Oil Slick CSS gradient
Petrol film on wet asphalt. 4 CSS layers on #0A0E12, mixed with color-dodge and multiply and overlay and soft-light. 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
Oil Slick,
ready to paste.
Petrol film on wet asphalt. 4 layers mixed with color-dodge and multiply and overlay and soft-light. 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.
Oil Slick CSS
.bg-oil-slick {
background-color: #0A0E12;
background-image:
linear-gradient(40deg, rgba(0, 229, 255, 0.45) 0%, rgba(124, 77, 255, 0.45) 33%, rgba(255, 64, 129, 0.45) 67%, rgba(0, 230, 118, 0.45) 100%),
radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0) 70%),
radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 35%),
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.8%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.12%22%2F%3E%3C%2Fsvg%3E');
background-blend-mode: color-dodge, multiply, overlay, soft-light;
background-size: cover;
}Colours in Oil Slick
Where to use it
Oil Slick is a prism 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 prism gradients
New games, tools and tutorials
About one short email a week. No spam, one-click unsubscribe.