Mesh Gradient Generator
Pick your colors, reshuffle until the field looks right, then take it as a PNG wallpaper or as CSS you can paste straight into a stylesheet.
Local onlyEverything on this page - the preview, the randomness, and every file you download - is generated by JavaScript in this tab. Nothing you type, pick, or upload is transmitted, and the page keeps working offline.
A mesh gradient is what you get when several color fields bleed into each other from different points - the soft, atmospheric backgrounds you see behind product screenshots and hero sections everywhere. This generator builds one from your palette: the first swatch is the base coat, every other swatch becomes a color field dropped at a seeded random position, and the grain slider adds the film-like noise that stops large gradients from banding.
Two exports, both honest. The PNG renders at real wallpaper sizes (up to 1920×1080, plus phone and square). The CSS export is not an approximation of the picture - it is the same construction, written as stacked radial-gradient layers with the identical positions and radii, sized in absolute pixels to your chosen export dimensions - so what you paste into a stylesheet is what you saw in the preview, minus the grain (the CSS notes both).
Questions this tool gets asked
What is a mesh gradient?
A gradient built from multiple color points spread across a surface, each fading outward until they blend - as opposed to a linear gradient's single direction. The result reads as depth and atmosphere rather than a stripe, which is why it's the default background of modern landing pages.
Can I export a mesh gradient as CSS?
Yes. The Copy CSS button gives you a background-color plus stacked radial-gradient layers with the exact positions and radii used in the preview. It works in every modern browser with no prefixes - paste it onto any element.
How do I make a mesh gradient wallpaper?
Set your colors, pick the 1920×1080 or Phone preset, reshuffle until you like the composition, and download. The PNG always renders at the preset's full resolution regardless of your screen size.
Why add grain to a gradient?
Large soft gradients show banding - visible stripes where 8-bit color steps run out. A small amount of noise dithers those steps away and adds texture. The grain here is baked into the PNG export; the CSS export stays clean by design.
Is anything uploaded when I generate?
No. The gradient is painted on a canvas in this tab, and both exports are assembled locally. Your palette and downloads never leave your machine, and the page keeps working offline once loaded.
Can I use these gradients commercially?
Yes. What you generate is yours - use it in client work, app stores, videos, anywhere. No attribution required.
Method
- Algorithm
- A base color fill plus one stacked radial gradient per remaining palette color, each field's position and radius set by
mulberry32(seed)and scaled by the "spread" control (mesh-gradient.js:11-20, 26-39). Optional grain is added by reading the canvas back withgetImageDataand offsetting each pixel by noise from a second mulberry32 stream,mulberry32(seed ^ 0x9e3779b9)(mesh-gradient.js:40-50). The CSS export is not a re-derivation - it writes the identical seeded field positions and radii out as stackedradial-gradient()layers (mesh-gradient.js:53-59), so the pasted CSS matches the PNG minus the grain. - Determinism
- Seeded. Field placement and grain both come from mulberry32 streams keyed on the visible seed; the same seed and controls reproduce the same gradient and the same CSS exactly.
- Export
- PNG at the chosen preset, up to 1920x1080, plus 1080x1920 (phone) and 1200x1200 (square) (
mesh-gradient.js:6, 74-79) - about 2.07 million pixels at the largest, comfortably under even Safari's ~5.24 million pixel canvas cap. These are wallpaper/hero-image resolutions for screens, not print: there is no CMYK path in a browser, and 1920x1080 is well below usable pixel counts for large-format print at 300dpi. - Licence
- Output is the user's to use for anything, including commercial work, with no attribution required.