Mesh Gradient Generator Free: practical tips and common mistakes
Reviewed by the OnlineFree.app team · Updated
Key points
- Mesh Gradient Generator Free turns three to six hex colors into a mesh gradient and exports PNG, SVG, or copyable CSS without uploading anything.
- Keeping the palette to three or four hue-distinct colors produces a cleaner mesh than six near-identical swatches.
- Softness around 60% is the default sweet spot; near 100% the blobs smear into one flat wash.
- Writing down the seed integer is the only way to recreate an exact blob arrangement after a reload.
- Grain at 5–10% hides banding on large gradients without making the image look noisy.
What Mesh Gradient Generator Free produces
Mesh Gradient Generator Free is a browser-based tool that turns three to six hex colors into a soft, multi-blob gradient, previewed live and exportable as PNG, an SVG file, or copyable CSS. It runs entirely in the page — no account, no upload, no server round trip.
The layout is deliberate: color swatches, a blob-count slider, a softness slider, a seed field and a grain toggle sit in a left rail, while the gradient fills the right side with code tabs and a download bar directly beneath it. Any input change redraws the canvas immediately, so you judge a hero background by eye instead of guessing at hex codes.
Defaults are a violet / fuchsia / cyan / amber palette, 5 blobs, 60% softness, grain off, and a 1920×1080 export. That is a sensible starting point; the real work is deciding how many colors you actually need and how much blur the background can take. You can open Mesh Gradient Generator Free and get a usable hero in under a minute.
How many colors does a mesh gradient need?
A mesh gradient reads as a mesh because you can see distinct color zones bleeding into each other. Stack six near-identical blues and the result looks like one flat blue with extra steps.
The palette input takes 3 to 6 valid hex values and silently dedupes identical entries, so typing the same code twice does not buy you an extra blob — it wastes a slot. Choose colors that differ in hue, not only in lightness. The violet, fuchsia, cyan and amber defaults work because each sits in a different part of the wheel.
Three or four colors is usually enough. Five and six suit wide hero areas that get cropped by the viewport; on a phone, a six-color gradient exported at 1920×1080 often collapses into two visible zones anyway. If a swatch refuses your code, expand shorthand hex to six digits and try again.
How soft should a mesh gradient be?
Softness is a blur radius from 0% to 100%, and 60% is the default for good reason. Low values leave visible circular edges, which reads as a repeating pattern rather than a gradient. Near the top of the range every blob smears into a uniform wash and you lose the color mixing that made the effect worth using.
Blob count runs from 2 to 8. More blobs means more overlap and more accidental mud in the middle, so if you push toward 8, also pull softness down to roughly 40–50% and keep the palette tight. Two or three blobs at higher softness give the cleanest full-width hero.
The seed is the part people forget. Blob positions are placed from that integer, so writing it down is the only way to get the same composition back after a reload. Shuffle until you like the arrangement, then note the number.
Grain is a 0–30% overlay, off by default. It exists to hide banding on large flat areas; start around 5–10% and inspect at 100% zoom, because grain that looks subtle on a laptop can look noisy on a phone screen.
Export as CSS, SVG or PNG — at the right size
The code tabs give you two live-ready options. The CSS tab builds a stack of radial-gradients — the form browsers composite cheaply and the one you paste straight into a hero rule. The SVG version uses feGaussianBlur, the standards-based way to blur shapes in vector form. Both are specified by the W3C, so you can hand-edit the output against the CSS radial-gradient definition or the SVG feGaussianBlur element.
Export sizes are presets rather than free-form: 1200×630 for social and Open Graph cards, 1920×1080 for a standard hero or slide, 2560×1440 for retina desktops, and 1080×1080 square for app splashes and avatars, with the longest side capped at 3000px. Match the export to where the image lands — a 2560×1440 PNG used as an OG card just gives crawlers a heavier file to fetch.
PNG is generated client-side from the canvas. If you need a different container, such as WebP for a lighter hero, pass the download through the Image Format Converter instead of regenerating the gradient. OnlineFree.app lists the rest of the tools, and all of them run in your browser.
Common mistakes that make a mesh look cheap
The most common mistake is exporting at high softness and then dropping white text on top. A gradient that looks lovely alone can leave a headline sitting on a bright amber zone at barely readable contrast. Screenshot the hero, place your real text over it, and check it at the smallest screen width you support. If it fails, add a subtle dark overlay or shift the palette toward deeper tones.
Second: banding. An 8-bit PNG of a smooth gradient can show visible steps across a large area, especially on cheaper panels. A small grain setting of 5–10% is the cheapest fix and adds very little weight to the file.
Third: forgetting the seed, then being unable to recreate the exact arrangement later. Fourth: regenerating a fresh PNG for every breakpoint instead of exporting once at 2560×1440 and letting CSS scale it down.
The quietest mistake is assuming the CSS output is pixel-identical to the PNG. It is close, but browsers interpolate gradients slightly differently, so verify on the real page rather than trusting the preview alone. Treat exported numbers as a good draft, not a guarantee.
Frequently asked questions
Is Mesh Gradient Generator Free really free, and do I need an account?
Yes. Mesh Gradient Generator Free needs no account, no sign-up, and adds no watermark. The gradient is generated in your browser with canvas, and nothing you pick or export is uploaded to a server. That also means it keeps working offline once the page has loaded, and you can generate as many gradients as you want.
What file formats can I export from Mesh Gradient Generator Free?
You can download a PNG at one of four preset sizes — 1200×630, 1920×1080, 2560×1440, or 1080×1080 square — and copy either CSS radial-gradient code or SVG code with one click. PNG covers Open Graph cards and splash screens; CSS and SVG are what you paste into a live page.
Why does my mesh gradient look flat or muddy?
Usually too much softness combined with too many similar colors. Softness near 100% blurs every blob into a single wash, and six near-identical hex values collapse visually into one tone. Try three or four hue-distinct colors, drop softness to about 40–60%, and reduce the blob count before adding more colors.
How do I recreate the same gradient later in Mesh Gradient Generator Free?
Save the seed integer, the softness value, the blob count, and the hex list. Blob positions are derived from the seed, so identical inputs reproduce the same composition. Pressing shuffle changes the arrangement, so copy the number before you close the tab or refresh the page.
Can I use the exported mesh gradient in a commercial project?
The generator does not add attribution requirements or watermarks to its output. A gradient is color and math rather than a stock asset. Still, check the fonts and images you combine it with, and verify text contrast for accessibility before shipping a hero section. For anything contractual, confirm usage terms yourself.