Mesh gradient generator.

A background where a few colors melt into each other with no hard stops, like the soft color fields behind many product sites and app screens. Each point is one color, and every pixel blends the points near it, weighted by distance.

Hero and section backgrounds, Open Graph images, wallpapers, slides and app placeholders. A size preset sets the picture for each: desktop, QHD, 4K, square, phone, Open Graph and X header, or any size up to 8,192 pixels a side.

The colors are blended in OKLab, a color space where mixes stay bright instead of turning grey or muddy between two hues. Softness sets how far each point reaches, and Warp bends the borders between colors into curves.

CSS can't blend several points in OKLab, so the CSS and Tailwind versions are radial gradients over the colors' average, close to the picture at the default softness. For the exact look, save the picture or use the SVG.

No. The gradient is drawn in your browser, pixel by pixel, and nothing is sent anywhere. Large exports are drawn a band of rows at a time so the page stays responsive.

Drag a point on the preview, or select it and use the arrow keys (Shift for bigger steps). Add points up to eight, remove them down to three, and change a selected point's color.

PNG, WebP or JPG at the chosen size, or a PNG copied to the clipboard. The code tabs give CSS, a Tailwind class and an SVG, each to copy, and the CSS and SVG to download.

Yes. Shuffle picks a new seed, and the seed places the points and the grain, so the same seed and settings always draw the same gradient. Type a word in Seed to come back to a layout you liked.

Grain adds fine film noise on top, which hides banding on wide, slow blends and gives a printed feel. It's in the picture, the SVG and the CSS, where it's a tiled noise layer.

No. The Mesh gradient generator is free and opens without a sign-in, an account or an install.

Closest to the Mesh gradient generator: CSS gradient generator, Tailwind gradient generator, SVG pattern generator, Open Graph image generator. Each opens on its own page, free and in the browser.

The Mesh gradient generator is one of 11 in its group. The group's page, /tools/design, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.