Mesh Gradient Generator
NewGenerate colorful multi-point mesh gradient backgrounds with live preview.
Background base
Layer five radial color blobs over a solid fallback color.
Gradient blobs
Preview
Generated CSS
Frequently Asked Questions
Can I add more than five blobs to the mesh gradient?
Not in this tool. The UI and generated CSS are built around exactly five radial-gradient blobs, each with its own color, X, Y, and size controls.
Why does the background color still show through my mesh gradient?
Each blob fades to transparent, so the solid fallback color is meant to show underneath. The copied CSS always includes both background-color and background-image for that reason.
Why does Randomize keep blobs away from the very edges?
The randomizer intentionally keeps X and Y between 10% and 90% and sizes between 40% and 80% for more balanced results. If you want edge-to-edge blobs, move the sliders manually, which allow 0% to 100% positions and 30% to 100% size.
Does the preview update live or do I have to click Generate?
It updates live. Changing the base color or any blob slider immediately redraws the preview and rewrites the CSS output.
Can this export a PNG, SVG, or background image file?
No. It only generates CSS: one fallback background-color plus five radial-gradient layers that you can copy into your stylesheet.