Mesh gradient generator — soft colour blends as SVG and CSS

How to use the mesh gradient generator

1. Type your colours into Colours (hex, comma-separated), for example #ff7eb3, #7afcff, #feff9c.
2. Pick a Background colour. It shows wherever the colour circles fade out.
3. Set Softness (10–200). Higher values blend the colours more.
4. Set Width and Height (200–2,000 px) to match the space you want to fill.
5. Change Seed for a new arrangement, then download mesh-gradient.svg or copy the CSS.

What it does and when to use it

Mesh gradients are the soft, cloudy colour blends you see behind app landing pages, wallpapers and presentation covers. Unlike a simple two-stop gradient, colours blend in several directions at once. Use one as a hero background, a card header, or a slide backdrop with white text on top.

If you want a straight or circular blend you can control exactly, the gradient generator is simpler. For shapes with clear edges on top of colour, try the abstract background generator. To choose colours that work together first, build a palette with the colour palette generator.

How it works

For each colour, the tool picks a random position inside the canvas and a random size. In the SVG, each colour becomes a circle with a radius between about 21% and 42% of the longer side. All circles share one feGaussianBlur filter whose stdDeviation is the Softness value, and a clip path keeps the blur inside the canvas.

The CSS output stacks one radial-gradient per colour on top of background-color. Each gradient starts at the colour’s position and fades to transparent at its size. The random numbers come from a seeded generator, so nothing changes until you change the seed or the inputs. Nothing is uploaded.

Worked examples

Default four colours. Seed 1 places the pink #ff7eb3 near the lower left. The SVG uses <feGaussianBlur stdDeviation="80"/>, and the first CSS layer is radial-gradient(at 13% 73%, #ff7eb3 0px, transparent 62%).

A colour name slips in. With #0ea5e9, red, #f97316, the word “red” is skipped. Only two circles are drawn, and the second CSS layer is radial-gradient(at 73% 67%, #f97316 0px, transparent 65%).

No valid colours. If the list holds only red, the tool shows “Enter at least one hex colour, such as #ff7eb3.” instead of an image.

Limits and tips

• Large blurs take work to draw. On a very big canvas with a high Softness, the SVG can be slow to appear on older phones; the CSS version has no blur filter to compute.
• Three to five colours tend to look best. With one colour you get a single soft spot on the background.
• Check text contrast on the lightest and darkest parts before you put words on top.