Skip to main content
Toollyz

Search tools

Search for a command to run...

Gradient Mesh Generator

Build the Stripe/Linear-style mesh gradient with a stack of soft radial colour blobs. Drag any stop in the preview to reposition it, tweak per-stop size and colour, pick a base colour underneath. Six curated palettes (Sunset, Ocean, Forest, Candy, Midnight, Stripe). Output is one CSS `background-image:` line of comma-separated radial-gradients. 100% offline.

What is the Gradient Mesh Generator?

Gradient Mesh Generator implements the 'mesh gradient' look popularised by Stripe, Linear, Vercel and Apple marketing pages. Technically it's a stack of `radial-gradient(circle at x% y%, color 0%, transparent size%)` layers — each blob is a soft circle with a transparent outer ring, and the layers blend together against a solid base colour. The on-page editor lets you drag every stop directly in the preview (Pointer Events for mouse/touch/pen unification), with per-stop sliders for X position, Y position, size (10-100% of the container's larger dimension), and colour. Six curated palettes (Sunset, Ocean, Forest, Candy, Midnight, Stripe) cover most marketing-page needs; click any preset to load its full stop list. Add or remove stops freely — typical meshes use 3-6 stops. Output is one CSS rule: `background-color:` + `background-image:` with comma-separated radial gradients. No SVG, no images, no JS — pure CSS that renders at any element size.

How to use it

  1. Pick a palette to load 3-5 stops; or click 'Add stop' to start from scratch.
  2. Drag any colour dot in the preview to reposition that stop.
  3. Open a stop's row below the preview and tweak size + colour.
  4. Use the Base picker to set the colour beneath the blobs — it shows wherever no blob reaches.
  5. Click 'Copy CSS' to grab the rule.

Benefits

  • Drag-to-move stops in the preview — Pointer Events for unified mouse/touch/pen.
  • Six curated palettes (Sunset, Ocean, Forest, Candy, Midnight, Stripe).
  • Per-stop sliders for X, Y and size (10-100%).
  • Add or remove stops freely — typical meshes use 3-6.
  • Output is pure CSS: one `background-color` + one `background-image` line with comma-separated radial gradients.
  • No SVG, no images, no JS dependencies — renders at any element size.
  • Base colour control for the area between blobs.
  • Configuration persists in localStorage.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

What's a mesh gradient?

A 2D arrangement of colour stops that blend smoothly. In CSS we approximate it by stacking several `radial-gradient` layers — each colour fades to transparent, so overlapping blobs naturally blend through their alpha channels.

How is this different from a regular gradient?

A linear gradient has two endpoints and a single direction. A mesh gradient distributes colour across multiple points in 2D space, producing those vibrant 'cloudy' marketing-page backgrounds you see on Stripe and Linear.

Why are some blobs hidden behind others?

CSS renders the gradient list back-to-front — the first listed gradient is on top. Reorder by editing the stop list; the dot you dragged most recently keeps its array position.

How many stops should I use?

3-6 is the sweet spot. Fewer than 3 looks more like a regular gradient; more than 6 starts to look noisy and the GPU has more work to composite.

Why does the preview lag with too many stops?

Each stop is one full radial gradient that the browser composites. Modern GPUs handle ~8 fine; older mobile devices may stutter past 10. If you need many colours, increase stop sizes so fewer overlap.

Can I animate the mesh?

Yes — set a `transition: background-image 1s ease` and swap to another mesh on hover or class change. CSS doesn't tween gradient stops natively, so the transition is cross-fade-style rather than morph.

What about SVG output?

Not currently exported — the CSS is the source of truth. SVG would let you animate stop positions independently but adds complexity. Future work.

Why does CSS look fine but the preview shows weird seams?

Browsers render gradients at low precision in some debug modes (or with `image-rendering: pixelated`). The exported CSS renders smoothly when used on a normal element.

Can I use this for hero backgrounds?

Yes — that's the primary use case. Set the element's height to e.g. `min-height: 100vh` and the mesh fills any size without distortion.

Are my settings saved?

Yes — base colour and full stop list persist in localStorage under `toollyz:gradient-mesh`.

Is anything uploaded?

No. Preview and CSS generation run entirely in your browser.

Related tools

See all image tools