Mesh Gradient Generator
Create beautiful mesh gradients for free — drag colour points around the canvas, add up to eight colours, adjust the blend and film grain, and copy lightweight CSS or download a PNG or JPG up to 4K. Start from presets like Aurora, Peach and Ocean.
100% private — everything runs in your browser. Conversion happens on your device; nothing is uploaded.
Drag the dots to move each colour.
The CSS is built from layered radial gradients, so it’s tiny and works in every modern browser with no image file. PNG and JPG downloads match the preview and can add film grain. Free for personal and commercial use.
How to make a mesh gradient
- Pick a preset, or add your own colours.
- Drag the dots on the preview to move each colour.
- Adjust the blend, base colour and grain.
- Copy the CSS, or download a PNG or JPG.
What you can use it for
- Make modern website hero backgrounds
- Create wallpapers for desktop and phone
- Design backgrounds for slides, thumbnails and social posts
- Add soft colour fields behind UI mockups
More free tools
Building for the web?
Format, minify, convert and generate code with our free, private developer tools.
See all free tools →Frequently asked questions
What is a mesh gradient?
A smooth blend of several colours that flow into each other in different directions, rather than in a straight line like a linear gradient.
How does the CSS version work?
It layers several radial gradients over a base colour. It's only a few lines, needs no image file and scales to any screen size.
What does grain do?
It adds subtle film noise to PNG and JPG downloads, which reduces colour banding and gives a premium, textured look.
What sizes can I download?
From social sizes up to 3840 × 2160 (4K), including phone wallpaper and banner sizes.
Is it free for commercial use?
Yes, with no attribution required.