What Is a Mesh Gradient and Why Use One?
A mesh gradient background is a soft, organic blend of color built from several overlapping radial gradients, popular in modern hero sections, app backgrounds, and marketing pages precisely because it has no single visible direction or center the way a flat linear or radial gradient does. An aurora gradient generator like this one is a specific, high-contrast style of mesh gradient, cool blues and violets blending like the northern lights, but the same underlying technique produces a calm pastel mesh gradient just as easily by choosing analogous colors instead. Compared to a photographed or hand-painted gradient background, a css mesh gradient is pure code: no image file to load, infinitely resizable, and easy to tweak by adjusting a handful of numbers instead of re-exporting an asset.
How to Build a Mesh Gradient With This Tool
Pick one of the 6 palette presets (Aurora, Sunset, Forest, Rose, Ocean, Minimal) to start from a coordinated multi color mesh gradient, or adjust the default points directly. Each point has its own color (hex input or color picker), an X and Y position, and a Spread percentage controlling how far that color's glow extends before fading to transparent. Set the base background color underneath everything, add up to 6 points total with Add Point, then copy the generated CSS, it's a background-color plus a multi-layer background-image, ready to paste into any stylesheet.
How This CSS Mesh Gradient Technique Actually Works
Despite the complex, painterly look, a gradient mesh css generator like this one only ever outputs plain CSS: each point becomes one radial-gradient(ellipse SPREAD% SPREAD% at X% Y%, COLOR 0%, transparent 70%) layer, and every layer gets stacked in a single comma-separated background-image list, painted in order with later layers drawn on top. There's no canvas, no SVG, no image export, just gradients, which means the technique has universal support in any browser that supports CSS gradients at all (effectively every browser in use today) and the whole background scales losslessly to any size.
Tips for a Good Mesh Gradient
Spread points out across the canvas rather than clustering them in one corner, a mesh gradient background reads as muddy gray when too many colors overlap in the same spot and average out toward neutral. A Spread around 40 to 70% usually gives the softest blending without looking like distinct, hard-edged circles. For a calm, cohesive look, pick colors that sit close together on the color wheel; for a vivid, aurora-style contrast, pick fully complementary colors instead, distance between hues is what reads as "aurora" versus "pastel wash." Fewer, larger points with generous spread almost always look better than many small, tightly-packed ones.