CSS mesh gradient generator.

What the generated CSS means

Each color point becomes one layer: radial-gradient(at 18% 20%, #47e4e0 0px, transparent 50%). The at value is the point's position as a percentage of the element's width and height. The gradient has the default ellipse shape sized to the farthest corner, and the color fades to transparent halfway to that corner. The base color comes last and fills everything the layers do not cover.

CSS paints the first background layer on top, so point 1 sits above point 2, and so on. Where points overlap, the upper layer's color wins near its center. Because CSS blends to transparent with premultiplied alpha, the fade edges do not turn gray or muddy the colors underneath.

Copy the whole declaration. Removing a layer removes that color. If you split it into separate properties, put the radial gradients in background-image and the base color in background-color, because background-image cannot hold a plain color. That split form is what the collection below the tool copies.

.hero {
  background:
    radial-gradient(at 18% 20%, #47e4e0 0px, transparent 50%),
    radial-gradient(at 80% 16%, #5f81e4 0px, transparent 50%),
    radial-gradient(at 74% 82%, #f67ff5 0px, transparent 50%),
    radial-gradient(at 22% 78%, #f6f6d9 0px, transparent 50%),
    #3b3486;
}

Controls

Drag the numbered points across the preview with a mouse, finger or pen. Each point is also a button: focus it with Tab and use the arrow keys to move it 1% at a time, or 10% with Shift held.

The Color stops panel lists each point. Click a swatch to open a HEX picker with a text field, use the shuffle button to swap in a color from a curated palette, or remove the point. The plus button adds a point with a random color and position, up to eight; at least two must remain. Base color sets the solid color underneath.

Shuffle (or the G key) replaces every color and position and sets the base to the first new color. Download PNG redraws the mesh on a canvas at twice the preview's displayed size and saves it as mesh-gradient.png, for places where CSS is not an option, such as social images, slides or design files.

Using a mesh in a real layout

Positions are percentages and each ellipse is sized to its element, so the mesh stretches with the box. A mesh tuned on the wide preview looks different on a tall phone hero: the points spread vertically and the blobs become tall ellipses. Check the target element at both shapes, or set a separate background in a media query for narrow screens.

In Tailwind CSS v4, avoid pasting the value into bg-[…]: because the value ends with a plain color, Tailwind reads it as a background-color and the gradient is dropped. The arbitrary property form [background:…] with underscores for spaces does work, but a mesh is long and hard to edit that way. A custom utility in your main CSS file is easier to maintain and still works with variants such as md: and dark:.

/* app.css, Tailwind CSS v4 */
@utility bg-mesh-hero {
  background:
    radial-gradient(at 18% 20%, #47e4e0 0px, transparent 50%),
    radial-gradient(at 80% 16%, #5f81e4 0px, transparent 50%),
    radial-gradient(at 74% 82%, #f67ff5 0px, transparent 50%),
    #3b3486;
}

/* <section class="bg-mesh-hero md:min-h-[70vh]"> */

Tuning the look

The tool keeps every layer at the same size, but the copied CSS is easy to adjust by hand. Raise transparent 50% to 70% for a larger, softer cloud of that color, or lower it to 30% for a tighter spot. Add a size keyword after at, for example radial-gradient(circle closest-side at 50% 50%, …), when one color should stay compact.

• Colors of similar lightness give a calm, even field; mixing very light and very dark points gives strong highlights and shadows.
• The base color shows wherever the points are far apart. A dark base with light points reads as glowing light; a light base with saturated points reads as pastel.
• Points placed slightly outside the middle area, near the edges and corners, usually blend better than a cluster in the center.
• Four or five points are often enough. Eight points in a small card can turn into visual noise.

Readability and performance

A mesh changes color across the whole surface, so text contrast depends on where the text sits. Check your text color against the lightest region behind it, not the average, and move a point away from the headline area if needed. A CSS background is decorative and is not announced by screen readers. If you use the PNG in an img element as decoration, give it an empty alt attribute.

A static mesh is a few hundred bytes of CSS and a one-time paint for the browser, much smaller than an equivalent image. Animating it is different: changing background-position or the gradient values repaints every layer on every frame. For motion, draw the mesh on a pseudo-element and animate its transform, which browsers can usually move without repainting, and stop it under prefers-reduced-motion.

Questions

Does CSS have a native mesh gradient?

No. CSS has linear, radial and conic gradients only. Draft versions of SVG 2 described a mesh gradient, but browsers did not ship it. Layering radial gradients over a base color, as this tool does, is the common CSS approximation.

How do I use a mesh gradient in Tailwind CSS?

Define a custom utility with @utility in your CSS file and use its name as a class, or use an arbitrary property such as [background:radial-gradient(at_18%_20%,#47e4e0_0px,transparent_50%),#3b3486]. Do not use bg-[…] for the full value: the trailing base color makes Tailwind output it as background-color, which drops the gradients.

What resolution is the PNG download?

The PNG is twice the width and height of the preview as it appears on your screen. For a larger image, widen the browser window before downloading, or use the CSS on an element of the size you need and capture it.

Why does my mesh look different on mobile?

Point positions are percentages and each radial layer is sized to the farthest corner of the element, so a tall, narrow element stretches the mesh vertically. Adjust the positions in a media query for small screens, or give the element a fixed aspect ratio.