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 stops, so what you paste into a stylesheet is what you saw in the preview, minus the grain.
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.