Mesh Gradient Maker

Drag blobs to reposition · click dot to recolor

Drag to move · Click dot to change color

Presets

Mesh Style

Filters

Blur60px
Contrast100%
Grain0

Color Points

4
#FF6B6B
20%, 20%
#4ECDC4
80%, 20%
#45B7D1
20%, 80%
#FFA07A
80%, 80%

CSS Output

background:
    radial-gradient(at 20% 20%, #FF6B6B 0px, transparent 50%),
    radial-gradient(at 80% 20%, #4ECDC4 0px, transparent 50%),
    radial-gradient(at 20% 80%, #45B7D1 0px, transparent 50%),
    radial-gradient(at 80% 80%, #FFA07A 0px, transparent 50%);
filter: blur(60px) contrast(100%);

How to create a mesh-style gradient

  1. Start from a preset or use the Random action in the header.
  2. Drag the color points to reposition them on the canvas.
  3. Click a point, or its swatch in the Color Points list, to change its color.
  4. Adjust the style and filter controls — Blur, Contrast, Grain, and the style-specific Sharpness or Flow sliders.
  5. Copy the CSS or download the canvas as a PNG.

Mesh-style backgrounds versus standard gradients

A standard linear or radial gradient follows a single direction or shape. This tool builds a multicolor composition from several positioned color regions. The copied CSS composes the result from layeredradial-gradient() stops — CSS does not have a native mesh-gradient property, so the output is an approximation built from radial gradients and a filter.

The on-screen canvas preview, the downloaded PNG, and the copied CSS are three different renderings of the same color points. The canvas uses a lighten blend with a blur/contrast filter; the CSS uses layered radial gradients with a filter. They are close, but not pixel-identical.

A lightweight CSS example

This is an illustrative composition, not an exact export of every editor style.

.mesh-background {
  background-color: #0F172A;
  background-image:
    radial-gradient(at 20% 20%, #FF6B6B 0, transparent 55%),
    radial-gradient(at 80% 20%, #4ECDC4 0, transparent 55%),
    radial-gradient(at 50% 80%, #A78BFA 0, transparent 60%);
}

Using a mesh background behind content

A mesh background varies in lightness across the canvas, so text placed on it may pass a contrast check in one spot and fail in another. Keep text on a sufficiently predictable area, or place it on a solid overlay.

If you use blur, apply it to a separate decorative background layer rather than the text container. The Grain effect is rendered on the canvas only and is not part of the copied CSS.

Frequently asked questions

What is a mesh-style gradient?
A mesh-style gradient is a multicolor composition built from several positioned color regions that blend together, rather than a single gradient running along one direction.
Can I move and recolor individual points?
Yes. Drag any color point to reposition it, and click a point (or its swatch in the Color Points list) to choose a new color for that point.
Does the copied CSS need an image file?
No. The copied CSS composes the background from layered radial-gradient() stops and a filter, so no external image is required.
Will every editor effect appear in the exported CSS?
No. The Grain effect is rendered on the canvas only and is not part of the copied CSS. The CSS approximates the canvas using layered radial gradients and a blur/contrast filter.
Can I put text over the background?
You can, but a mesh background varies in lightness across the canvas, so text may pass a contrast check in one spot and fail in another. Keep text on a predictable area or place it on a solid overlay.

More Color Tools

Gradient Generator
Standard linear, radial, and conic gradients
Aura Gradient Maker
Aura and glow gradient effects
Color Converter
Convert HEX, RGB, HSL, and CMYK values
Contrast Checker
Check text and background contrast