Mesh Gradient Generator

Create mesh gradients with draggable color points

Mesh gradients blend many colors across a surface in soft, organic transitions. They have become a staple of hero backgrounds, app splash screens and music covers because they feel richer than a simple two-color linear gradient. This mesh gradient generator lets you place between three and six colored points directly on the canvas, drag them into position and see the blend update instantly.

How it works in pure CSS

Browsers do not support true mesh gradients, but you can approximate them by layering several radial-gradient() backgrounds. Each layer is centered on one of your points and fades from the point color to a fully transparent version of the same color, and all layers sit on top of a base background-color. Overlapping fades mix colors smoothly, which gives the mesh look. The generated CSS is a single declaration with no images, so it loads instantly and scales to any element size.

Fading to rgba() with zero alpha, rather than the keyword transparent, avoids the gray fringes that can appear in some renderers, and it also lets the same gradient be reproduced exactly on an HTML canvas for the PNG export.

Blur, noise and palettes

The blur slider adds a CSS filter: blur() for an even softer look, and the noise slider overlays an SVG fractal-noise texture that adds subtle grain and reduces color banding on large surfaces. The Random palette button picks a harmonious set of hues with balanced saturation and lightness, and Random layout also rearranges the points. When you are happy, copy the CSS into your stylesheet or download a 1600 by 900 pixel PNG. Everything is generated locally in your browser and nothing is uploaded.