Mesh Gradient Generator Free: Step-by-Step Hero Backgrounds
Reviewed by the OnlineFree.app team · Updated
Key points
- Mesh Gradient Generator Free turns 3-6 hex colors into a soft multi-blob gradient and exports it as PNG, SVG or CSS.
- The seed integer controls blob positions, so saving it lets you rebuild the same gradient exactly.
- Softness defaults to 60% and blob count to 5; more blobs with less blur create busier, more distinct shapes.
- Grain between about 5% and 12% adds subtle texture; above 20% it reads as noise and grows the PNG file.
- Export sizes cap at 3000px on the longest side, so use the CSS export for full-screen 4K backgrounds.
What is Mesh Gradient Generator Free?
Mesh Gradient Generator Free is a free browser-based tool that turns a small set of hex colors into a soft, multi-blob mesh gradient you can preview live and export as PNG, SVG or ready-to-paste CSS. Everything runs inside the page: no account, no upload, no render queue.
Open the generator and you get a split screen — controls in a left rail, the gradient filling the right side, with copy-to-clipboard code tabs and a download bar directly under the preview. The defaults are already usable: violet, fuchsia, cyan and amber, five blobs, 60% softness, a random seed and grain switched off.
Under the hood, the preview is a canvas that redraws on every input change. The CSS tab returns a stack of radial-gradient() layers, and the SVG tab wraps blurred blobs in an SVG filter, so the export matches what you see rather than being a screenshot of it.
Build a hero gradient in six steps
Start by deciding the job — a landing-page hero, an app splash screen, or a 1200x630 social card — because that choice fixes your export size before you touch a single slider.
First, set the export size: 1200x630 for social cards, 1920x1080 for a standard hero, 2560x1440 for retina displays, or 1080x1080 square. Second, choose a palette by tapping one of the six presets or replacing swatches with your own hex values; the tool accepts 3–6 colors and quietly drops duplicates. Third, drag blob count, which defaults to 5 and ranges from 2 to 8.
Fourth, adjust softness, the control that decides whether you get distinct pools of color or one misty wash. Fifth, hit shuffle until the blob layout feels right, then write the seed number down. Sixth, switch grain on if you want texture, confirm the size, and export. With your brand colors already decided, a full run takes roughly 30–45 seconds; picking the colors is the slow part, not the tool.
What does the seed number change?
The seed decides where the blobs sit. Your palette chooses which colors appear and blob count decides how many, but the seed is what encodes their positions — change it and the same colors rearrange into a completely different composition.
Because the seed is a plain integer you can read and retype, results are reproducible. Note the seed next to your palette, blob count, softness and grain values, and you can rebuild the identical gradient next week, on a different machine, or in a client email.
The default is random, so the first gradient on any visit is fresh. If a layout already works, copy the seed before you touch anything else — pressing shuffle overwrites it.
PNG, SVG or CSS: which export should you use?
Pick the format that matches where the gradient has to live: raster for slides and social cards, live CSS for web pages, vector for anything a designer will reopen later. All three come from the same live preview, so colors do not drift between formats.
The CSS tab returns a stack of radial-gradient() layers you can paste straight into a stylesheet — the standard way to build this effect, documented in the W3C CSS Images Module Level 4 specification. It stays sharp at any viewport and adds only a few lines of text instead of an image request.
Choose SVG for print, for email templates where CSS gradient support is patchy, or when someone needs to nudge blob positions by hand. It uses the feGaussianBlur filter described in the W3C Filter Effects Module Level 1. PNG remains the safest option when the gradient is going into a slide deck, a Figma board or a CMS field that only accepts images.
Grain, export sizes and honest limits
Grain is off by default and runs from 0 to 30% opacity. Somewhere between 5% and 12% it adds a subtle film-like tooth that stops large soft gradients from looking plasticky; past roughly 20% it reads as visible noise, and it pushes PNG file size up as well.
Export sizes are capped at 1200x630, 1920x1080, 2560x1440 and 1080x1080, with a 3000px longest-side ceiling. A 2560x1440 PNG with grain is a heavy file, so if your CMS or email platform is strict about weight, run it through the Image Format Converter to WebP before shipping.
Two honest limits. A mesh gradient is decorative, so never let it carry your text contrast — check any headline placed on top against WCAG contrast guidance. And the PNG is raster: scaling a 1080x1080 export up to a 4K hero will soften it, so export at the size you actually need, or use the CSS version. If you want other utilities alongside it, the OnlineFree.app free online tools collection is all browser-based.
Frequently asked questions
Is Mesh Gradient Generator Free really free to use?
Yes. Mesh Gradient Generator Free runs entirely in your browser at no cost, with no sign-up, watermark or export limit. The PNG is produced client-side through canvas toBlob, so your colors never leave your device, and there is no credit system or queue to wait in.
How do I get the exact same mesh gradient again later?
Write down five values: the hex palette, blob count, softness percentage, grain setting and the seed integer. Re-entering those reproduces the same gradient, because blob positions are derived from the seed. Changing one value changes only that aspect of the result, so keep the notes together.
Should I export CSS or PNG from Mesh Gradient Generator Free?
Export CSS when the gradient is a live web background, because a radial-gradient stack stays sharp at any viewport and costs only a few lines of code. Export PNG for fixed images such as slides, thumbnails and social cards, and SVG when you want to edit blob positions in a vector tool.
Can I use the exported gradient in commercial work?
The export is built from colors you selected, so using it in client work, landing pages or social posts is the ordinary case and there is nothing to license from the tool. If your palette is lifted from a licensed brand system, follow that brand's own usage rules rather than assuming it is free.
What is the maximum export size?
Mesh Gradient Generator Free offers 1200x630, 1920x1080, 2560x1440 and square 1080x1080 presets, with a hard 3000px ceiling on the longest side. For a full-bleed 4K background, export at 2560x1440 and let the browser scale it, or paste the CSS version instead.