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 color, 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.
If you wanted the ordinary two-color ramp rather than this — the kind that goes behind a button or a hero — that is the gradient maker, which writes a single linear-gradient or radial-gradient you can paste straight into a stylesheet. This page is for the blurred, multi-color effect that neither of those can produce on its own.
What the web calls a mesh gradient is a base color with several radial-gradient layers stacked on it. Each is opaque at its center 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 color 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 color 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 rasterized 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.
