Mesh gradient generator

.mesh {
  background-color: #eef2ff;
  background-image:
    radial-gradient(70% 70% at 12% 18%, #818cf8 0%, #818cf800 100%),
    radial-gradient(65% 65% at 85% 12%, #f472b6 0%, #f472b600 100%),
    radial-gradient(75% 75% at 78% 88%, #fbbf24 0%, #fbbf2400 100%),
    radial-gradient(60% 60% at 18% 85%, #34d399 0%, #34d39900 100%);
}

How a mesh gradient is made in CSS

CSS has no mesh gradient function, so the usual way to get one is to stack soft radial gradients over a plain background colour. That is what this tool writes: one radial-gradient() per point, all in one background-image, over a background-color.

• Where each point sits. at 20% 30% puts the point's centre 20% across and 30% down the element, so the mesh keeps its layout at any size.
• How far it spreads. A spread of 60% (60% 60%) means the colour reaches 60% of the element's width to the left and right of the centre, and 60% of its height up and down — an ellipse. It is solid at the centre and fades in a straight line to nothing at the edge of that ellipse; outside it the point adds no colour. On a wide element the ellipses are wide, on a tall one tall.
• Fading to the same colour. Each point fades to its own colour at zero opacity (#818cf800) rather than to transparent. In CSS the two look the same; spelling it out means the CSS, the Tailwind classes and the PNG all use exactly the same colour stops.
• Which point is on top. CSS paints the first background layer on top, so point 1 covers point 2 where they overlap, and so on down the list. The base colour shows wherever the points have faded out.
• Random meshes. New random mesh picks a starting hue and spreads the points' hues from it, with a pale base in the same hue. The seed makes it repeatable: same seed and number of points, same mesh.

Using it

CSS — add the .mesh class to a section or a full-page wrapper; it needs a height (from its content or set). Tailwind — the same two declarations as arbitrary-value classes (spaces become _), for Tailwind CSS v4. PNG — the same mesh painted at the width and height you set, up to 3840 × 2160, for slides, wallpapers or design files. For a single shape rather than a full background, try the blob generator; for a frosted card on top of a mesh, the glassmorphism generator.

How we test it

91 different meshes, from 1 to 8 points, are checked in Chrome 155. The CSS you copy is pasted on a wide, a tall and a square box and photographed: 68,250 pixels must match the colour worked out separately from the points — each one an ellipse of its spread fading in a straight line, stacked bottom to top over the base (largest difference 2.5/255). The PNG painter is run the same way (68,250 pixels, within 2.7/255). The Tailwind classes, compiled by the real Tailwind CSS, and the preview must give exactly the same background as the CSS. Deliberately broken versions — layers in reverse order, x and y swapped, the common at x% y% shortcut whose size depends on the farthest corner, a missing base colour, Tailwind classes with spaces left in, a PNG painted in reverse layer order or with round instead of box-shaped ellipses — must each be caught.

Questions

Can I use the gradients in commercial work?

Yes. They are generated in your browser from colours and numbers you choose; there is nothing to credit and no licence attached.

Why does my mesh look different on a phone?

Positions and spreads are percentages of the element, so on a tall phone screen each point's ellipse is tall and narrow. Set the preview width and height to the phone's shape to see it, or use a media query to swap in a second mesh.

Is it heavy for the browser?

No image is downloaded — the browser draws the gradients itself, and the CSS is a few hundred bytes. If you animate the mesh, every layer is repainted on every frame, so keep animation off large meshes.

Can I add grain or blur?

The points already fade smoothly, so no blur is needed. For a grainy look, put a small semi-transparent noise image in front of the mesh as another background layer, or download the PNG and add grain in an image editor.