CODDY Tool

Mesh Gradient Generator

Build a soft, multi-colour mesh gradient by placing colour points on a canvas.

Place three to six colour points anywhere on a canvas and this blends them into a soft, organic mesh gradient — the layered-blob look behind a lot of modern landing pages — and gives you the plain CSS to reproduce it.

Everything you enter stays in this browser tab. Nothing is sent to our servers, logged or stored.

Loading tool…

About Mesh Gradient Generator

CSS has no native mesh gradient primitive — there is no single background-image value that paints several colours blending smoothly across a surface the way design tools like Figma can. What every CSS mesh gradient actually is, under the hood, is several radial gradients stacked on top of each other, each one a soft coloured blob that fades to transparent before it reaches its neighbours. Layered together, the overlaps read as a smooth blend.

Each point here is exactly one of those radial gradient layers: a position (as a percentage, so it stays responsive) and a colour. Moving a point moves where that layer's centre sits; the spread control changes how far each one fades out before it turns transparent, which is what determines whether the blend looks tight and distinct or soft and merged.

The technique holds up well at typical background sizes — a hero section, a card, a full-page backdrop — without needing SVG filters, a canvas, or JavaScript at render time. It is just CSS, and it degrades gracefully: a browser that somehow ignored the gradients would just show the flat base colour underneath.

How to build a mesh gradient

  1. Add or remove colour points

    Three to six points, each with its own position and colour.

  2. Drag positions with the sliders

    Watch the preview update live as you move each point.

  3. Adjust the spread

    Controls how far each colour fades before turning transparent.

  4. Copy the CSS

    One background-image declaration, ready to paste.

Frequently asked questions

Is this a real CSS mesh gradient?

It produces the visual effect people mean by 'mesh gradient' using layered radial-gradient() functions, which is the same technique every browser-based mesh gradient tool uses — CSS itself has no dedicated mesh gradient syntax.

Why do my colours look muddy in the middle?

Where several radial gradients overlap, their colours mix — which is the whole effect, but it means placing several saturated, differently-hued points close together can produce a brownish or grey overlap zone. Spacing points further apart, or choosing colours from a similar family, keeps the blend cleaner.

Does this work as a background on any element?

Yes — the output is a standard background-image declaration and applies to any block-level element. It works well full-bleed on a page or section, and just as well confined to a card or button.

How many colour points should I use?

Three or four is usually enough for a clean, readable blend — more points add more overlaps, and past five or six the result often turns muddy rather than more interesting. Fewer, well-placed points with distinct colours generally beat a crowded canvas.

Related tools

All Color & Design Tools

CSS Gradient Generator

Color & Design Tools

Create linear, radial and conic CSS gradients with a live preview.

Glassmorphism Generator

Color & Design Tools

Frosted-glass CSS cards — blur, tint and border, with a live preview over a real backdrop.

Blob Generator

Color & Design Tools

Generate a smooth, organic SVG blob shape — solid or gradient fill, downloadable.

Color Palette Generator

Color & Design Tools

Build harmonious colour palettes from one base colour, ready to copy as CSS.

Box Shadow Generator

Color & Design Tools

Design layered CSS box shadows with a live preview and copy the code.

Mesh Gradient Generator is free to use with no account, no watermark and no usage limits. Last updated 3 September 2026.