🌈Mesh Gradient Generator

About this tool

Drag the colour handles on the preview, or focus one and use the arrow keys, to move each colour. Change each colour and how far it spreads, add up to eight points, pick a preset such as Aurora, Peach or Ocean, or press Randomise for a new palette. Copy the pure CSS, or download a 1920 × 1080 PNG for slides and wallpapers.

How CSS mesh gradients work

Design apps make mesh gradients by blending colours across a grid of points, giving the soft, glowing backgrounds seen on many modern websites. CSS has no mesh gradient function, but the same look comes from layering several radial gradients, each starting with a solid colour at a point and fading to transparent, over a base background colour. Where gradients overlap, their colours blend smoothly. The CSS this tool writes is a single background-image property, so it needs no images, loads instantly, and scales to any screen size or shape. Tips for good results: keep the base colour close to your palette so faded areas don't look washed out; use three to five points for most designs; place points near the corners and edges for an even wash, or cluster them for a focal glow; and choose analogous colours, neighbours on the colour wheel, for calm backgrounds or complementary colours for energy. If you put text on top, test its contrast in the brightest and darkest areas. Honest limits: the PNG is drawn with canvas gradients, which blend slightly differently from the browser's CSS rendering, and smooth gradients can show faint banding on some displays, which a subtle noise texture hides. The CSS gradient generator makes linear and conic gradients, the glassmorphism generator creates frosted panels to place on top and the palette tool extracts colours from images.

Frequently asked questions