Mesh gradient generator
Drag the colour points to shape a soft mesh background. Click an empty spot to add a point. Export as pure CSS — no image file needed — or download a PNG.
Point 1
.mesh {
background:
radial-gradient(at 12% 18%, #ff2d87 0px, #ff2d8700 55%),
radial-gradient(at 85% 12%, #ffb800 0px, #ffb80000 50%),
radial-gradient(at 78% 85%, #3ea8ff 0px, #3ea8ff00 60%),
radial-gradient(at 20% 88%, #8b5cf6 0px, #8b5cf600 55%),
radial-gradient(at 52% 50%, #ffd1e8 0px, #ffd1e800 35%),
#1b1033;
}How a CSS mesh gradient works
Each colour point is one radial-gradient() positioned with at x% y%. It starts fully opaque at the point and fades to the same colour at zero alpha by the “spread” distance, so layers blend like airbrushed paint. The last value in the list is the base colour showing through underneath. Because the fade targets a transparent version of the same colour, there is no grey fringe where layers overlap.
For a subtle grain on top, many designers add a small noise PNG as one more background layer with background-blend-mode: overlay. For motion, see the animated gradient generator.
Questions
What is a mesh gradient?
In design apps a mesh gradient is a grid of colour points that blend smoothly in two directions. CSS has no mesh-gradient() function, so on the web the look is built by stacking several soft radial gradients over a base colour — which is exactly what this generator exports.
Will the CSS mesh gradient slow my page down?
No. It is a handful of radial-gradient layers on one element, painted by the GPU like any background. It is far lighter than a large JPEG and scales to any screen without blurring.
Can I download the mesh as an image?
Yes. “Download PNG” renders the same layers at 1600×900 on a canvas, useful for slides, social images or as a wallpaper.
How many colour points should I use?
Four to six usually look best. Put darker colours near the edges and one light colour off-centre to give depth. Use “Shuffle colours” to keep the layout but try new hues.