Mesh gradient generator

A mesh gradient blends several colours from different points at once, so colour drifts across the image instead of along one line. This one starts with four bright blobs on a deep navy base; move and resize them with the sliders.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Type

LinearRadialMeshPattern

Base colour

Blob 1

Across: 15%

Down: 20%

Size: 60%

Blob 2

Across: 85%

Down: 15%

Size: 55%

Blob 3

Across: 70%

Down: 85%

Size: 60%

Blob 4

Across: 10%

Down: 90%

Size: 45%

Grain: 0

CSS

background: radial-gradient(circle at 15% 20%, #6366f1 0%, transparent 60%), radial-gradient(circle at 85% 15%, #ec4899 0%, transparent 55%), radial-gradient(circle at 70% 85%, #22d3ee 0%, transparent 60%), radial-gradient(circle at 10% 90%, #f59e0b 0%, transparent 45%), #0f172a;

Tailwind class

[background:radial-gradient(circle_at_15%_20%,_#6366f1_0%,_transparent_60%),_radial-gradient(circle_at_85%_15%,_#ec4899_0%,_transparent_55%),_radial-gradient(circle_at_70%_85%,_#22d3ee_0%,_transparent_60%),_radial-gradient(circle_at_10%_90%,_#f59e0b_0%,_transparent_45%),_#0f172a]

PNG size

Width

Height

1920 × 1080 px

At a glance

A mesh-gradient() function in CSS: There isn't one. CSS gradients are linear, radial and conic, so this tool stacks soft radial gradients instead; Source: developer.mozilla.org, checked 2026-11
What each blob is: A radial-gradient(), which draws shapes radiating out from a centre point; Source: developer.mozilla.org, checked 2026-11
Which blob sits on top: The first background layer is drawn closest to you, so blob 1 covers the others where they overlap; Source: developer.mozilla.org, checked 2026-11
Blobs: 1 to 4, each with its own colour, position and size

Want a page that already looks finished?

A free Liite page comes with 15 themes, from soft sunset tones to plain black and white, plus gradient and pattern wallpapers of your own. Pick one, add your links, and your page is live at liite.co/yourname.

Make your free page

Mesh gradient generator: what to know

This page starts the background generator for this case. For every option and how to use it, see the background generator.

How this differs from a mesh in a design app

In Illustrator or Figma, a mesh is a grid of points you drag to bend the colour. Here each colour is a soft circle that fades to transparent over a base colour. You can't warp a grid, but for a background the look is close, and the result is plain CSS that any browser can draw.

Overlapping blobs mix where they meet. Spread them towards the corners for a calm wash of colour, or bunch them up for a brighter, busier centre. A blue mesh gradient is one change away: set every blob to a shade of blue and lighten the base.

Mesh gradient CSS

The CSS is one background declaration with a radial-gradient() layer per blob and the base colour last. Paste it into your stylesheet as it is. It needs no image file and stays sharp at any size, so it suits full-page website backgrounds.

Questions

How do I create a mesh gradient?

Pick a base colour, then add up to four blobs and set each one's colour, position and size. Copy the CSS for a website or download a PNG at any size up to 4096 pixels.

Can I make a blue mesh gradient?

Yes. Change each blob to a different blue, such as navy, royal blue and sky blue, and set a pale blue or white base. Keeping the blobs in one colour family gives a softer result.

Is the mesh gradient CSS supported everywhere?

It's built from radial-gradient() layers, which every current browser draws, so there is nothing to install or polyfill.