Loona Mesh Gradient Generator — Aurora / Blob Gradient Backgrounds in CSS
Mesh gradients make flat pages feel alive, but hand-writing four layered radial-gradients is misery. Drag the blobs here, copy two CSS lines, done.
Several soft radial gradients ("blobs") layered over a base colour. Move each blob, resize its glow, recolour it.
How to use the Mesh Gradient Generator
- Recolour the base — it shows wherever blobs fade out.
- For each blob: pick its colour, position (x/y) and glow size.
- Copy the CSS. The background-color line paints the base; background-image stacks the blobs.
How it works
Each blob is a radial-gradient positioned by percentage with a transparent falloff; stacking them over a solid base produces the mesh. Because it is pure CSS, the background scales to any screen with zero image weight.
Worked example
A portfolio site’s hero goes from plain dark to a teal-gold aurora that echoes the owner’s logo — two lines of CSS, no image downloads.
Frequently Asked Questions
Mesh vs regular gradient?
A linear gradient blends along one line. A mesh blends several colour pools in two dimensions — softer, more organic, more "aurora".
Will it slow my page?
No — it is pure CSS rendering, no image files at all.
Can I add more blobs?
Four blobs cover most designs. The exported CSS pattern is easy to extend by copying a radial-gradient term.
Does it work on mobile?
Yes — percentage positioning makes it fully responsive.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).