toolready. Mesh Gradient Generator

Mesh Gradient Generator

Multi-color mesh backgrounds built from stacked radial gradients.

Click and drag any spot inside the stage to move it.
Spots

What this does

A mesh gradient is the soft multi-colour wash you see on landing pages and phone lock screens. CSS has no mesh-gradient property, so this tool fakes one the practical way: several radial-gradient() layers, each a coloured centre fading to transparent, stacked over a solid base colour. The output is plain CSS — no SVG, no canvas, no image file.

The three default spots serialise to this:

background:
  radial-gradient(at 20% 20%, #ff7eb3 0px, transparent 50%),
  radial-gradient(at 80% 30%, #7afcff 0px, transparent 55%),
  radial-gradient(at 60% 80%, #feff9c 0px, transparent 50%),
  #1a1612;

How do I make a mesh gradient background?

  1. Drag the round handles around the 16:10 stage to move each spot. Positions are percentages of the element, so the result scales with whatever you apply it to.
  2. In the Spots column, click a swatch to recolour a spot and use its slider to set size — the fade radius, adjustable from 20% to 90%.
  3. Add more with + Spot (new spots land dead centre) or remove one with the × on its row.
  4. Press Randomize to throw four fresh spots from one of four built-in palettes — a fast way to find a direction before you tune it by hand.
  5. Set the Base colour, then copy the block into your rule.

What does the base colour do?

It is the last entry in the background shorthand, so it paints behind every gradient layer and shows through wherever the spots have faded out. Without it, the gaps would be transparent and whatever sits behind your element would leak through. It defaults to a near-black #1a1612, which makes bright spots glow; pick a light base instead and the same spots read as a pastel wash.

Does layer order matter?

Yes. In CSS the first background layer is drawn on top, so the spot at the top of the list wins where two overlap. With translucent fades the difference is subtle, but with a large, strongly coloured spot it is very visible. The list order follows the order spots were created, so if a colour is being buried, delete it and add it again to move it to the front.

Why do the gradients use "0px" and not "0%"?

The first stop is the colour at the centre point and the second is where it reaches full transparency. Writing the first as 0px pins it to the exact centre regardless of the element's size, while the second stop stays a percentage so the falloff scales with the box. That mix is what lets one declaration look right on both a hero section and a small card.

Is this fast enough for a page background?

Stacked gradients are painted once and composited by the GPU, and they do not repaint on scroll, which makes them far cheaper than an animated canvas or a large image. The cost grows with layer count, though — keep it under about eight spots on low-end mobile, and be careful about putting an expensive backdrop-filter panel on top of a heavy mesh.

What works well on top of it?

Mesh backgrounds and frosted panels are made for each other — build the card in the glassmorphism generator and use this as its backdrop. For a simple two-stop linear or radial fill, the gradient tool is the smaller hammer, and you can pick exact spot colours in the colour converter. Everything is composed in your browser.