CSS mesh gradient generator
Drag the colour points to blend a soft, organic, multi-colour background — then copy the pure CSS or download it. Mesh-style gradients built from layered radial gradients, no images, no signup.
What is a CSS mesh gradient?
A mesh gradient is a soft, organic background where several colours bleed into one another from different points on the surface — the fluid, almost three-dimensional look you see on modern landing pages and app backgrounds. Unlike a plain linear gradient that runs colours along a single straight line, a mesh blends multiple colour "blobs" so the result feels rich and atmospheric rather than flat.
On the web, the most practical way to build one in pure CSS is to layer several radial-gradient() functions, each a soft circle of colour fading to transparent, stacked over a background colour. That is exactly what this generator produces — real, copy-pasteable CSS with no images and nothing running at page load. Drag the points to position each colour, and the CSS updates live.
How to use it
Each circle on the canvas is a colour point. Drag it to move that colour around the background. Click a point to select it, then change its colour with the picker or hex field. Use Add colour for a richer blend (three to five points usually looks best), adjust the blend slider to control how softly the colours spread, and set a background colour behind them. When it looks right, copy the CSS or download it as a file.
An honest note on "mesh"
True mesh gradients — the kind in design tools like Figma, where a warped grid of points distorts the colour field — can't be expressed as plain CSS; they require an exported image or SVG/WebGL rendering. What pure CSS does brilliantly is the layered-radial approach, which produces the same soft, organic, multi-colour feel and stays editable in code. This tool generates that mesh-style gradient: genuine CSS you can drop into any project, not an image you have to host.
Where mesh gradients work well
They make excellent hero and landing-page backgrounds, app and dashboard backdrops, card and section fills, and abstract cover images. Because the output is lightweight CSS, it scales to any screen size without a heavy image download. One accessibility tip: if you place text over a mesh gradient, keep the colours in a similar lightness range behind the text, and check contrast at the lightest and darkest points of the blend.
Using the result
Paste the generated rule into the background of any element. Want to fine-tune the individual colours first, or build a matching palette? Use the colour picker, pull colours from a photo with the image picker, or build a simpler two-colour blend with the linear & radial gradient generator.