Mesh Gradient Generator
Craft luminous, multi-point mesh gradients online and export them in one click — as PNG, SVG or CSS. Free and unlimited.
A mesh gradient in three moves
A mesh gradient blends several colour points across a surface, so light seems to pool and flow instead of running along a single line. It is the look behind modern hero sections, album art and app backdrops — and here it is generated live from pure math, so it stays razor-sharp at any size.
- 1Explore. Hit Randomize (or press Space) until a combination sings.
- 2Refine. Click any colour stop to recolour that point, or start from a preset.
- 3Export. Download a PNG or SVG, or copy the CSS straight into your project.
Building a full scene? Pair your gradient with an SVG wave divider, a blob shape, a frosted glass panel, fine grain or a tiled pattern — every tool shares the same Liquid-Light look.
Good to know
What is a mesh gradient?
A mesh gradient blends several colour points across a surface in two directions at once, so light appears to pool and flow rather than fade along a single line. A linear gradient runs colour down one axis and a radial one rings it from a centre; a mesh spreads multiple points freely for richer, more organic colour.
How do I make a mesh gradient?
Press Randomize (or the Spacebar) to explore fresh on-brand combinations, or start from a preset. Select any colour stop to recolour that point until it feels right, then export — PNG, SVG or CSS — in one click. No design skills needed.
Which format should I use?
PNG for slides, thumbnails and social posts; SVG for crisp, infinitely scalable web backgrounds; CSS when you want the gradient rendered natively by the browser with zero image weight.
How do I add noise or grain to a gradient?
A touch of grain stops large gradients from looking flat or banded on screens. This tool keeps the gradient pure, so the cleanest approach is to layer a separate noise texture on top — Lumisphere has a dedicated noise / grain generator for exactly that. Export your mesh as a PNG, drop a subtle grain layer over it, and blend to taste.
Can I use it in Figma or on slides?
Yes. Download a PNG and drop it into a Figma frame, a Keynote or PowerPoint slide, Canva, or any design tool as an image fill. For Figma you can also paste the CSS via plugins that import gradient backgrounds. Everything is yours to use freely in commercial work — no attribution required.
Does it work on mobile?
Yes. The whole studio is mobile-first — the controls collapse into a bottom sheet, and you can recolour, randomize and export right from your phone. The generator runs entirely on your device.
Will the CSS match the preview exactly?
The PNG is a pixel-perfect capture of the live preview. The CSS and SVG are a faithful layered-gradient approximation — visually almost identical, and they stay tiny and fully editable.
Does it work offline / without an account?
Completely. The generator runs entirely in your browser — nothing is uploaded, and there is no account to create.
What a mesh gradient actually is
Think of a handful of coloured lights placed around a canvas, each one glowing softly into the next. A mesh gradient is exactly that — colour sampled at several points and blended smoothly across the whole surface, so hue and brightness shift in two directions at once. That two-dimensional flow is what gives the result its depth: light seems to pool, fold and catch, the way it does on water or frosted glass, rather than fading evenly from edge to edge.
Mesh vs linear vs radial. A linear gradient runs colour along a single straight axis, and a radial one rings it outward from a single centre — both are essentially one-dimensional transitions. A mesh gradient spreads several colour points freely across the plane and blends them together, so you get organic, multi-directional colour that no single line or circle can produce. It is the richer, more painterly cousin — and the reason modern interfaces reach for it when a flat fill feels too plain.
Where designers use them
A mesh gradient earns its place anywhere a flat colour would feel inert. It is the go-to backdrop for a hero section, setting the mood without competing with the headline, and a fast way to make a deck look designed — drop a PNG behind a title slide in Keynote or PowerPoint and the whole presentation lifts. Export at high resolution and the same gradient holds up smoothly on social posts and thumbnails, carries a product's identity as an app or brand backdrop across screens, or simply becomes your next phone and desktop wallpaper — generate one you love and download it.