Free · no sign-up · runs in your browser

Mesh Gradient Generator

Turn a few color picks into a soft, multi-blob mesh gradient. Preview it live, then download a PNG or SVG, or copy ready-to-paste CSS — a hero background in under a minute.

PNG download SVG export Copy-paste CSS

Live preview

Redraws instantly as you tweak any control.

4 colors · 5 blobs · softness 60% · seed 20481 · 1920 × 1080 px

Export

Everything is generated on your device — nothing is uploaded.

PNG is rasterised at the export size above; SVG and CSS stay sharp at any resolution.

Controls

Pick colors, tune the blob spread, lock a seed you like.

Colors

3–6 swatches. Add or remove colors, or start from a preset palette.

Blobs

5

2–8 color blobs spread over the canvas.

Softness

60%

Higher values melt the blobs together.

Seed

Same seed always redraws the exact same layout.

Grain

Add film grain

0%

Optional noise texture, 0–30%.

Export size

Longest side stays under 3000px.

Grab the code

Loading code…

How it works

Three steps, no account, no upload.

1 · Pick colors

Choose 3–6 swatches with the color pickers or start from one of six preset palettes.

2 · Tune the mesh

Blob count, softness, grain and seed reshape the gradient live. Shuffle until it clicks.

3 · Export

Download a PNG at HD or square size, grab an SVG, or copy the CSS gradient stack.

Built for hero backgrounds

Runs 100% in your browser

The gradient is drawn with the canvas API on your device. Nothing is uploaded and no sign-up is required.

Reproducible seeds

Every layout comes from a seed number. Share it with a teammate and they get the identical blobs.

Real export sizes

1200×630 for link previews, 1080×1080 for the app store, up to 2560×1440 for a hero image.

CSS that stays sharp

The copied CSS uses a radial-gradient stack with no image weight and scales to any screen.

Optional film grain

Add 0–30% grain to kill banding on large flat surfaces.

Fine on a phone

Sliders, swatches and buttons are sized for thumbs, so you can design on the bus.

FAQ

Is it really free?

Yes. The whole generator runs in your browser, so there is no server cost to pass on and nothing to sign up for.

Where do my colors and images go?

Nowhere. No image or color value leaves your device — the PNG and SVG are built locally with canvas and Blob downloads.

PNG or SVG — which should I use?

Use SVG or the CSS snippet for hero sections that must stay crisp on any screen. Use PNG when a platform needs a raster image, such as a social preview card.

Why does the same seed give the same gradient?

Blob positions come from a seeded pseudo-random generator, so a seed plus a palette always reproduces the exact layout. Shuffle gives you a new one.

Can I use the gradients commercially?

Yes — the output is generated from your own color choices, so use it in client work, landing pages and apps.