BgImageA PictureEditor.com tool
Generated on your machine.

Build a mesh gradient from real layers

Four radial fields overlap across the canvas. Select any chip to move its centre, change its colour falloff, blend or opacity.

radial gradient, three stops, red to red, then radial gradient, three stops, blue to blue, then radial gradient, three stops, green to green, then radial gradient, three stops, violet to violet, over a deep indigo ground. 1920 × 1080 pixels.

Output size

File format
Set the size in millimetres or inches
Unit

A physical size is a claim about paper, so it needs the resolution beside it. At 300 DPI this canvas prints 162.6 by 91.4 millimetres.

2.1 megapixels

This mesh is a stack of four transparent radial layers rather than a flattened picture. Every field remains editable and the exported CSS carries the same construction.

A mesh is a stack, not a magic filter

The soft colour pools in the opening design are ordinary radial gradients with transparent outer stops. Their centres are spread across the frame and their blend mode lets the ground show through. Because the construction stays as layers, moving one point changes only that field and the copied CSS remains useful at any viewport size.

Select a field chip, move its centre across and down, then edit the first stop for its colour. Opacity controls how strongly it enters the mix; the layer order determines which field sits on top.

Where meshes go wrong

  1. Four saturated fields can make the middle muddy. Lower opacity before adding another colour.
  2. A CSS mesh reflows with its element while a raster export does not; use the file when exact placement matters.
  3. Transparent radial edges are intentionally broad. Tight stops produce visible circles rather than a continuous field.

Other constructions