Mesh gradient generator

A mesh gradient in CSS is not a mesh

A real mesh gradient — Illustrator’s Gradient Mesh — is a grid of control points, each holding a colour, with the surface between them interpolated. CSS has no mesh primitive, and no gradient that takes more than one axis. Figma has none natively either: its fills are linear, radial, angular and diamond, so a mesh there is a plugin or a stack of soft shapes — the same trick this page plays in CSS.

What the web calls a mesh gradient is a base colour with several radial-gradient layers stacked on it. Each is opaque at its centre and transparent at its edge, so where two overlap the eye reads one surface. That is what this generator writes: a background-color, then one radial-gradient per colour inside a single background-image.

Layer order is the reverse of what you expect

In a background-image list the first layer paints on top. Canvas and design tools do the opposite, where the last thing drawn wins, so this reads backwards.

When to use the CSS, and when to export the PNG

Use the CSS for anything that renders in a browser. It weighs about half a kilobyte, costs no request, stays crisp on any display, and a colour can be changed without opening a design file.

Export the PNG when the destination cannot run CSS: an email background, a share card, a slide deck, print. Export it too when the image must be pixel-identical everywhere, or to add grain elsewhere — a large, smooth gradient in 8-bit PNG can band on a good monitor, and a little noise is the usual fix.

The aspect ratio catches people out

Positions and sizes here are percentages, resolved against the box the gradient paints into, so the same declarations look different in a 16:9 hero and a tall phone viewport. Keep the blobs near the edges rather than the middle, so the composition survives a squeeze, and preview at the ratio you will ship — which is why the preview takes its shape from the export size.

The accessibility trap

Contrast is measured against the pixels directly behind the text, so on a gradient the ratio changes under every letter: a headline crossing the dark corner can fail two words later. What matters is the worst pixel, not the average; 4.5:1 for body copy and 3:1 for large text still apply.

The fixes that work are structural: put the text on a solid or semi-opaque panel, drop a flat scrim behind it, or keep the busy part of the gradient away. A text shadow is not a fix — it makes thin type muddy and does nothing for the audit you will face later.

Nothing is uploaded

The gradient is generated, previewed and rasterised by your own browser. It makes no request of any kind, so an unreleased brand palette never leaves your machine. Load the page once and the tool keeps working with the network off.