Mesh Gradient Generator
Blend colour points into a mesh gradient built from layered radial-gradient() blobs over a solid background — pure CSS, no image files.
Drag a point on the preview to move it, or focus it and use the arrow keys.
background: radial-gradient(at 20% 20%, #8b5cf6, transparent), radial-gradient(at 80% 15%, #ec4899, transparent), radial-gradient(at 25% 80%, #06b6d4, transparent), radial-gradient(at 75% 75%, #f59e0b, transparent), #1e1b4b;Result: 1 line, 224 charactersWhat is a mesh gradient?
A mesh gradient blends several colors from different points on a surface for a soft, organic look that is popular in modern app and website backgrounds. This generator recreates the effect in pure CSS by layering multiple radial-gradient(at X% Y%, color, transparent) blobs over a solid background color inside a single background shorthand — no image files and no libraries.
How to use it
Add color points and drag them on the preview or set the X and Y position of each, pick a background color, or press Randomize for a curated palette; Grain lays a fine SVG noise texture over the mesh, written into the same shorthand. The preview updates live and the exact CSS is ready to copy into your stylesheet.
Frequently asked questions
Is this real CSS with no image?
Yes. The output is a single background shorthand built from layered radial-gradients, so it stays crisp at any size and adds zero network requests. With Grain turned up, the shorthand also carries an SVG noise tile as a data: URL on top, so there is still no image file to host.
Where do I paste the mesh gradient CSS?
Copy the declaration and set it as the background of any element such as a hero section, a card, or the page body. Give the element a height so the gradient has room to show.
Can I download the gradient as an image?
Yes. Choose a size and PNG or JPG and the gradient is drawn to an image the same way the CSS draws it.
Can I add grain, or move a point by dragging it on the preview?
Yes. The Grain slider lays a fine SVG noise texture over the whole mesh. It is off by default, travels in the link like the other settings, and is painted into the file when you press Download image, so the image matches the preview. Every point also has a round handle on the preview: drag it to move the point, or focus it and use the arrow keys, holding Shift for bigger steps. The point’s X and Y sliders follow along.