Skip to content

Gradient Mesh Generator

Create beautiful gradient mesh backgrounds. Click any control point to change its color, use presets, or randomize. Export as PNG or copy CSS.

Preview

Click any colored circle to change that control point's color

CSS Output

background: radial-gradient(ellipse at 0% 0%, #8B5CF6 0%, transparent 70%),
  radial-gradient(ellipse at 50% 0%, #00BCD4 0%, transparent 70%),
  radial-gradient(ellipse at 100% 0%, #0097A7 0%, transparent 70%),
  radial-gradient(ellipse at 0% 50%, #1565C0 0%, transparent 70%),
  radial-gradient(ellipse at 50% 50%, #0D47A1 0%, transparent 70%),
  radial-gradient(ellipse at 100% 50%, #1976D2 0%, transparent 70%),
  radial-gradient(ellipse at 0% 100%, #004D40 0%, transparent 70%),
  radial-gradient(ellipse at 50% 100%, #00695C 0%, transparent 70%),
  radial-gradient(ellipse at 100% 100%, #00897B 0%, transparent 70%);

Presets

Control Points

About Gradient Mesh Generator

The mesh is created using bilinear interpolation across a 3×3 grid of color control points. Each pixel's color is smoothly blended from its four nearest corner colors. The CSS output uses overlapping radial gradients as an approximation suitable for web use. Download the PNG for pixel-perfect results in design tools.

  • 100% free — no account needed
  • Runs in your browser
  • Nothing is uploaded

Frequently asked questions

Is Gradient Mesh Generator really free?

Yes. Gradient Mesh Generator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.

Does Gradient Mesh Generator upload my data?

No. Gradient Mesh Generator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.

Do I need to sign up or install anything?

Neither. There is no account and nothing to download — open the page and Gradient Mesh Generator is ready to use on desktop or mobile.

Does Gradient Mesh Generator work offline?

Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.

More design & visual

CSS Gradient Generator

Create linear CSS gradients with a live preview.

CSS Box Shadow Generator

Build and preview CSS box-shadow values with one-click copy.

CSS Glassmorphism Generator

Generate frosted-glass CSS with backdrop blur and copy-ready styles.

QR Code Generator

Generate custom QR codes for any text or URL.

WiFi QR Code Generator

Generate a scannable QR code to share WiFi credentials instantly.

Letter Profile Picture

Generate avatar images from initials with custom colors.