BYTETOOLS

Mesh Gradient Generator

Create soft multi-color mesh gradient backgrounds with seeded blob layouts, harmony-based palettes, blur and grain, exported as a PNG at any size.

265
72
58
5
7
90
6
Palette#2c4add#4e3adf#8747e1#b954e3#e561e5

Mesh gradient — 1200 × 630

CSS approximation

background: #2c4add;
background-image:
  radial-gradient(at 15% 20%, #2c4add 0px, transparent 55%),
  radial-gradient(at 85% 30%, #4e3adf 0px, transparent 55%),
  radial-gradient(at 30% 85%, #8747e1 0px, transparent 55%),
  radial-gradient(at 75% 70%, #b954e3 0px, transparent 55%);

Stacked CSS radial gradients get close without an image, but they cannot reproduce the blur and grain. Download the PNG when you need the exact look.

What is the Mesh Gradient Generator?

Mesh gradients are the soft, multi-colored backgrounds that fill modern app screens, hero sections and social cards.

  • Stacked radial gradient blobs blurred into a single smooth mesh
  • Four color harmonies with base hue, saturation and lightness controls
  • Seeded layout, so any gradient can be reproduced exactly
  • Grain slider that removes visible banding on large flat areas
  • Size presets for social cards, wallpapers, square posts and stories
  • PNG export up to 4096 pixels plus a copyable CSS approximation

How to use the Mesh Gradient Generator

  1. 1

    Pick a size preset, or type a custom width and height in pixels.

  2. 2

    Choose a color harmony and set the base hue, saturation and lightness sliders.

  3. 3

    Set how many colors the palette holds and how many gradient blobs to place.

  4. 4

    Click Shuffle layout, or type a seed, until the arrangement looks right.

  5. 5

    Adjust the blur and grain sliders, then click Download PNG or Copy CSS.

About the Mesh Gradient Generator

Mesh gradients are the soft, multi-colored backgrounds that fill modern app screens, hero sections and social cards. The ByteTools Mesh Gradient Generator builds them by stacking several radial gradient blobs at seeded positions on a canvas, blurring the whole composition heavily, and optionally adding a fine grain so the result never bands.

Palettes are generated from a color harmony rather than picked at random: analogous, complementary, triadic or a full spectrum spread, each driven by base hue, saturation and lightness sliders. The layout comes from a seed, so shuffling gives a fresh arrangement and typing the seed back reproduces it exactly. Size presets cover social cards, wallpapers, square posts and stories.

Everything is drawn 100% locally in your browser with the canvas API and nothing is uploaded to any server. Download the finished gradient as a PNG at up to 4096 pixels a side, or copy the CSS approximation built from stacked radial gradients when you would rather ship no image file at all.

Frequently asked questions

What is a mesh gradient?

A mesh gradient blends several color points across a surface instead of running along a single straight or radial axis. The result is a soft, organic wash of color with no obvious direction, which is why it has become such a popular background style for apps and marketing pages.

Can I make a mesh gradient in pure CSS?

You can get close by stacking several radial-gradient layers, and this tool gives you that rule to copy. CSS cannot reproduce the heavy blur pass or the grain, so download the PNG when you need the exact look you see in the preview.

Why does my gradient show visible banding?

Banding happens when a smooth ramp has fewer distinct 8-bit values than it has pixels to cover. Raising the grain slider adds a small amount of noise that dithers those steps together, which is the standard fix and stays invisible at normal viewing distance.

What size should a mesh gradient be for a social card?

1200 by 630 pixels is the standard Open Graph size used by most platforms, and it is available here as a preset. Stories and vertical posts want 1080 by 1920, while desktop wallpapers are usually 1920 by 1080 or larger.

Is the gradient generated on a server?

No. Every blob, the blur pass and the grain are all rendered in your browser on a canvas element, with no data sent anywhere. The PNG download is exported from that local canvas.

Related tools