Citrus Mesh CSS gradient
Lemon and lime on warm white. 4 CSS layers on #FFFCF0, mixed with multiply. 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
Citrus Mesh,
ready to paste.
Lemon and lime on warm white. 4 layers mixed with multiply. 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.
Citrus Mesh CSS
.bg-citrus-mesh {
background-color: #FFFCF0;
background-image:
radial-gradient(ellipse at 18% 22%, rgba(255, 224, 102, 1) 0%, rgba(255, 224, 102, 0) 50%),
radial-gradient(ellipse at 85% 20%, rgba(195, 245, 60, 1) 0%, rgba(195, 245, 60, 0) 46%),
radial-gradient(ellipse at 22% 86%, rgba(255, 184, 77, 1) 0%, rgba(255, 184, 77, 0) 48%),
radial-gradient(ellipse at 90% 88%, rgba(123, 224, 168, 1) 0%, rgba(123, 224, 168, 0) 42%);
background-blend-mode: multiply, multiply, multiply, multiply;
background-size: cover;
}Colours in Citrus Mesh
Where to use it
Citrus Mesh is a mesh 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 mesh gradients
New games, tools and tutorials
About one short email a week. No spam, one-click unsubscribe.