All generators

Random gradient generator

Mesh, aurora, linear, radial and conic. Copy the CSS or download the image.

1920×1080 · raster

Your rolls appear here. Use ← and → to step back and forth.

Every image is generated in your browser. Nothing is uploaded.

Five kinds of gradient

Linear, radial and conic gradients come with the exact CSS that draws them, so you can paste a rolled gradient straight into a stylesheet. Linear and radial gradients also download as SVG.

Mesh gradients blend three to seven coloured control points. Each pixel's colour is an inverse-distance average in linear light, which avoids the grey midpoints you get from mixing gamma-encoded colours, and the coordinates pass through a low-frequency noise warp so the blend flows instead of forming circles. Aurora places soft colour clouds over a dark base and tone-maps them, so overlaps glow instead of clipping.

Grain, sizes and reproducible links

Film grain adds per-pixel monochrome noise that is seeded too, so a grainy gradient is just as reproducible as a clean one. Grain makes the image raster-only, so SVG is not offered with it. The address bar always holds the seed and any values you changed, and opening that link redraws the same gradient at any resolution.

Reproducible by design

Every image comes from a seed. The address bar holds the generator, the seed, the size and only the settings you changed, so the link redraws the exact same picture on any device. That is useful for picking up where you left off, sending someone a design, or regenerating a file at a bigger size later. See how it works.

Questions

How do I get the CSS for a gradient?

Choose Linear, Radial or Conic and open the Code panel under the canvas. It shows the linear-gradient(), radial-gradient() or conic-gradient() declaration for exactly what you see.

What is a mesh gradient?

A smooth blend between several coloured points scattered over the canvas instead of along one line. Here it is computed per pixel with inverse-distance weighting and a noise warp.

Why is SVG not offered for my gradient?

Mesh, aurora and conic gradients, and any gradient with grain, are computed pixel by pixel. They download as PNG, JPEG or WebP at whatever size you set.

Can I choose my own colours?

Yes. Click any swatch in the Colours control to change it, then lock the palette so rolls only change the layout.

Related generators