Skip to content
T
Tools.Town
Free Online Tools for Everyone
🎨

Mesh Gradient Generator

100% Free

Create modern multi-point mesh gradients by layering positioned radial colours over a base — adjust points, randomise, and copy clean CSS, instantly and in-browser.

Live Preview
Clean CSS
Randomise
100% Client-Side

1. Build your mesh

Colour points (3)

2. Preview & CSS

CSS
background-color: #1e1b4b;
background-image:
  radial-gradient(at 20% 30%, #ff0080 0px, transparent 50%),
  radial-gradient(at 80% 10%, #7928ca 0px, transparent 50%),
  radial-gradient(at 50% 80%, #0070f3 0px, transparent 50%);

Embed This Tool

Easy to Embed

Add Mesh Gradient Generator to your website or blog in seconds.

  • Responsive design
  • Lightweight & fast
  • No backend required
  • Always up-to-date 
<iframe
  src="https://tools.town/embed/mesh-gradient-generator/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="Mesh Gradient Generator">
</iframe>

Share This Tool

Share Instantly

Share Mesh Gradient Generator with anyone — no login required.

  • Shareable link
  • No login required
  • Works on any device
  • No account needed

Share via

Advertisement

How to Use

  1. 1 Pick a base (background) colour
  2. 2 Add colour points and drag the X/Y values to position them
  3. 3 Adjust the blob spread to soften or tighten the blend
  4. 4 Hit Randomise for instant inspiration
  5. 5 Copy the generated CSS into your stylesheet

Features

  • Layered radial-gradient mesh — the pure-CSS technique, no images
  • 2–8 colour points with precise X/Y positioning
  • Adjustable base colour and blob spread
  • Deterministic, reproducible randomise button
  • Live preview and clean, copy-ready CSS
  • High-res PNG/SVG export and saved libraries with Pro

Why it Matters

Mesh gradients give interfaces a soft, modern, premium feel that flat colours can't. Building them by hand means juggling several radial gradients and positions; a generator lets you explore combinations visually and walk away with CSS that works in every modern browser.

★★★★★

Use Cases

Hero Backgrounds

Soft, colourful backdrops for landing pages

App & Card UI

Premium gradient surfaces for cards and headers

Social Graphics

Eye-catching backgrounds for posts and thumbnails

Design Systems

Reusable gradient tokens copied straight to CSS

What this tool does

The Mesh Gradient Generator builds a modern, multi-point mesh gradient and gives you clean, copy-ready CSS. Add colour points, position them, tune the base colour and spread, or hit Randomise — the live preview updates instantly.

How it works

A mesh gradient is several positioned radial-gradient layers stacked over a base colour. Each point becomes radial-gradient(at X% Y%, color 0px, transparent <spread>%), and the layers blend into a soft, multi-directional wash. Because it’s pure CSS, the result is resolution-independent and works in every modern browser.

Free vs Pro

The free tool outputs CSS and stores nothing. A proposed Mesh Pro would add high-resolution PNG/SVG export, saved palette libraries, watermark-free output, and animated meshes — while the CSS generator stays free.

Privacy

Everything runs locally in your browser. Nothing you create is uploaded, logged, or stored.

Frequently Asked Questions

What is a mesh gradient?
A mesh gradient blends several colours from different points across an area, producing a soft, multi-directional wash rather than a single straight or radial fade. In CSS it's created by stacking several positioned radial gradients over a base colour — exactly what this tool generates.
Is the output real CSS or an image?
Real CSS. The tool outputs a background-color plus a background-image made of layered radial-gradients, so it's resolution-independent, tiny in file size, and works in every modern browser. No image asset is required.
How many colour points can I use?
Between two and eight. More points create richer blends but can muddy the result — three to five usually looks best. You can position each point precisely with X and Y percentages.
Can I export a PNG or SVG image?
The free tool gives you copy-ready CSS. A proposed Mesh Pro would add high-resolution PNG, WebP, and SVG export, saved palette libraries, watermark-free output, and animated meshes — while the CSS generator stays free.
Is my data stored anywhere?
No. The gradient is built entirely in your browser. Nothing you create is uploaded, logged, or stored.
📖

Want to understand the math?

Browse all guides →
How CSS Mesh Gradients Work (a
mesh gradient

How CSS Mesh Gradients Work (and How to Use Them)

Learn what a mesh gradient is, how the layered radial-gradient CSS technique works, how to position colour points, and how to use mesh gradients well in real UI.

24 Jun 2026

5 min read

Related Tools You Might Like

Color Palette Generator

Generate harmonious palettes from any base color — complementary, analogous, triadic, tetradic, split-complementary, monochromatic.

CSS Gradient Generator

Build linear and radial CSS gradients with up to 6 color stops, custom angle/position/shape, live preview, and ready-made presets.

Gradient Generator

Build CSS linear, radial, and conic gradients with a live preview, custom colour stops, and one-click copy — no sign-up, runs entirely in your browser.

Border Radius Generator

Visually craft CSS border-radius with per-corner sliders, live preview, unit toggle (px/em/rem/%), and shorthand collapsing.

Aspect Ratio Calculator

Find the aspect ratio of any size and resize images while keeping the same proportions.

Browse more free tools
More Design Tools All categories