Apps / Color & CSS/Design Tools / CSS Gradient Mesh Generator

🌈 CSS Gradient Mesh Generator

Place 3–6 colored "blobs" on a canvas and this tool composites them into overlapping radial-gradient() layers — the closest a plain background-image can get to a mesh gradient.

CSS has no native mesh-gradient primitive. This is an approximation technique: several soft, positioned radial-gradient() layers stacked in one background-image. It looks convincing at a glance but is not a true mesh gradient (no per-vertex color interpolation) — for that you would need SVG, Canvas, or an image.

1. Blobs

2. Live preview

3. CSS output