Mesh Gradient Generator
Create soft, multi-point mesh gradients: drag 3 to 8 colour points, set each one’s opacity and radius and pick a background. Copy the result as pure CSS (layered radial gradients that work in every browser), as an SVG with a smoothing blur, or download a PNG at wallpaper or social sizes.
This tool runs entirely in your browser.
How to use the Mesh Gradient Generator
- 1Start from a preset or press Randomize.
- 2Drag the numbered points on the preview, or select a point and type its position, change its colour, opacity and radius.
- 3Add up to 8 points, remove extras, change the background colour and optionally add film grain.
- 4Copy the CSS or SVG, or choose a size and download a PNG.
What is the Mesh Gradient Generator?
A mesh gradient blends several colours from points spread across an area rather than along one line. CSS has no native mesh gradient, but stacking several radial-gradient() layers — each a colour fading to transparent from its own position — over a background colour gives the same soft, “aurora” look, and it works in every modern browser without any image file.
The SVG output draws the same gradients and adds a Gaussian blur so the colours melt together more smoothly; the PNG is rendered from that SVG at the size you pick. Use CSS for responsive page backgrounds and the SVG or PNG for wallpapers, slides and social images.
Frequently asked questions
Why do the CSS and SVG previews look slightly different?
The SVG and PNG add a blur filter for smoother blending, which plain CSS gradients can’t do without filters. The CSS preview shows exactly what the copied CSS produces.
Will the CSS work in all browsers?
Yes. Layered radial-gradient() backgrounds with positions are supported by all current browsers, including Safari and mobile browsers.
How do I make the gradient softer?
Increase each point’s radius so the colours overlap more, lower the opacity of strong colours, or use the SVG/PNG output, which adds a blur.
Is the Mesh Gradient Generator free and private?
Yes. The Mesh Gradient Generator is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.
Related tools
All color tools →- CSS Gradient GeneratorCreate linear and radial CSS gradients.
- Color Palette GeneratorGenerate harmonious color palettes.
- Color PickerPick colors and get HEX, RGB and HSL codes.
- Random Color GeneratorRandom pastel, vivid or dark colours with HEX codes.
- SVG to PNGConvert SVG vector graphics to PNG at any size.
- HEX to RGBConvert HEX color codes to RGB.