Mesh gradient generator

Make soft, multi-colour mesh gradients for backgrounds and hero sections — shuffle, recolour and export CSS or PNG — on your device.

Advanced settings (optional)

Mesh gradient

Colour spots

Base colour

Size

Trendy mesh gradient · CSS or PNG · made in your browser

Runs in your browser. Files are never uploaded — you can go offline after the page loads.

How to use the Mesh Gradient Generator

Pick a palette, or shuffle for a fresh blend.
Tune the spots, base colour and size in the big preview.
Copy the CSS or download a PNG.

Easy to use

Drop files, pick options, download. Whole folders at once, no signup, no daily limit.

Best quality

The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.

Private & secure

Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.

Soft, modern mesh gradients

Mesh gradients blend several colour spots over a base to make the rich, organic backgrounds behind so many modern apps and landing pages. Pick a palette, shuffle until the composition feels right, then adjust how many spots, the base colour and the aspect ratio in the big preview window — every control sits on the right, next to a full-size preview.

Export copy-ready CSS (layered radial-gradients) for the web, or a PNG for slides and social. Everything renders in your browser. For a single smooth blend, use the gradient generator; for organic shapes, the blob generator.

Frequently asked questions

What is a mesh gradient?

Several soft colour spots blended over a base colour, giving a rich, organic background — the look behind many modern app and landing-page hero sections.

Can I use it in CSS?

Yes — copy the generated layered radial-gradient CSS, or download a PNG for places that can’t take CSS.

CSS Gradient GeneratorBuild a linear or radial gradient with any number of colour stops, then copy the CSS or export a PNG Blob GeneratorCreate smooth, organic blob shapes for backgrounds and hero sections Pattern GeneratorMake seamless, tileable background patterns

Your files never leave your device

Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.

No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
No limits. No file-size cap, no queue, no watermark, no account.
Runs on your CPU. Batches use several cores in parallel; nothing is throttled.

More free tools

Need icons or SVGs to start from?

InfyTool is built by the same team as these free libraries.

InfyIconFree SVG and PNG icons you can open directly in these tools. InfySVGFree SVG designs and illustrations, ready to optimise or convert. InfyPNGFree transparent PNG graphics for mockups and social posts.