Mesh Gradient Studio

CSS has no native mesh-gradient (the free-form colour mesh you may know from Illustrator), so the web version of the effect is built by stacking several radial gradients over a solid base colour. That is exactly what this studio generates: each colour point becomes a radial-gradient layer positioned somewhere on the canvas that fades to transparent, and blending two to eight of them produces the soft, aurora-like wash you see in the preview.

The workflow is deliberately fast: choose how many colour points you want, then hit Randomize until something clicks. The palettes are curated sets of hues that sit well together, and the base colour is automatically set to the darkest colour in the chosen palette, which keeps the result rich instead of washed out. When you land on a keeper, copy the CSS — a background-color plus stacked background-image layers, no image files and no dependencies — or download a 1600×900 PNG for places that need a bitmap, such as slide decks or social banners.

Everything runs in your browser, and the two outputs suit different jobs. The CSS version weighs a few hundred bytes, scales to any element size without pixelation, and stays editable in your stylesheet. The PNG export is rendered to match the on-screen preview exactly, including the layer order, so what you see is what you download.