Ocean Mesh CSS gradient
Deep blue mesh with a cyan bloom. 4 CSS layers on #04121F, mixed with 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
Ocean Mesh,
ready to paste.
Deep blue mesh with a cyan bloom. 4 layers mixed with 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.
Ocean Mesh CSS
.bg-ocean-mesh {
background-color: #04121F;
background-image:
radial-gradient(ellipse at 18% 22%, rgba(14, 165, 233, 1) 0%, rgba(14, 165, 233, 0) 48%),
radial-gradient(ellipse at 85% 25%, rgba(37, 99, 235, 1) 0%, rgba(37, 99, 235, 0) 46%),
radial-gradient(ellipse at 25% 85%, rgba(6, 182, 212, 1) 0%, rgba(6, 182, 212, 0) 48%),
radial-gradient(ellipse at 88% 88%, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0) 50%);
background-blend-mode: screen, screen, screen, screen;
background-size: cover;
}Colours in Ocean Mesh
Where to use it
Ocean Mesh is a mesh 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 mesh gradients
New games, tools and tutorials
About one short email a week. No spam, one-click unsubscribe.