Mesh gradient generator
Generate a colorful multi-point mesh gradient right on a canvas, with no need to import an image. Adjust the number of points and their colors, then export the result as a PNG or copy the equivalent CSS.
How it works
Each colored point acts as a source of influence: for every pixel of the canvas, the final color is a weighted average of the colors of all the points, with the weight growing as the point gets closer (inverse distance weighting). This produces a smooth, organic gradient between the colors you choose.
Will the copied CSS look exactly like the PNG?
No. The generated CSS uses a stack of native CSS radial gradients, which looks close but not pixel-for-pixel identical to the inverse distance interpolation computed on the canvas. It is a lightweight but faithful approximation that you can use directly as a website background.
Why does the result change each time I click "Random positions"?
The positions of the points are picked at random within the canvas bounds each time a gradient is generated. Combined with the colors you choose, this lets you quickly explore many mesh gradient variations without placing the points by hand.
All rendering is computed locally in your browser: no data is sent to a server, even if you don't provide any image.