Free mesh [gradient] generator

A mesh gradient blends several color points across a surface instead of running one color into another along a single line. The result feels soft, dimensional, and alive.

A plain linear gradient interpolates between two or three stops down a straight axis. A mesh gradient scatters color points anywhere on the canvas and lets each one fade outward into its neighbors, so the color shifts in every direction at once. That is why mesh backgrounds look organic rather than mechanical, and why they have become the default backdrop for app landing pages, slide decks, and product screenshots.

Under the hood this tool keeps things honest and portable. It fills the canvas with a dark base tone, then paints one soft radial gradient per color point on top, each fading from full color at its center to transparent at the edges. Where two points overlap, their colors mix. That is the same recipe you get when you copy the CSS, so the image you download and the code you paste produce the same look.

The whole loop takes a few seconds. Start from the default palette, then shape it until it feels right for your background.

1
Pick your colors
Click any swatch to open the color picker and choose a shade. Add up to six points for a richer blend, or remove one to keep it calm. Three or four well-spaced colors usually read best.
2
Shuffle for ideas
Not sure where to start? Press Randomize to generate a fresh, harmonious palette spread around a new base hue. Keep tapping it until something clicks, then fine-tune individual swatches.
3
Add grain, if you like
Toggle Film grain to lay a subtle noise texture over the gradient. It hides banding on some displays and gives the background a warmer, printed quality.
4
Choose a size
Switch between Wallpaper 16:9, Square, and the 1200 by 630 Open Graph preset. The live preview and both exports match whatever you select.
5
Export or copy
Click Download PNG for a flat image, or Copy CSS to grab layered radial-gradients you can paste straight onto any element. Both stay on your device.

A good gradient does a lot of quiet work. Here are the spots where these exports tend to land.

• As a website or app background. Copy the CSS and drop it behind a hero section for a backdrop that scales to any viewport with no image request.
• As a desktop or phone wallpaper. Export the PNG at Wallpaper or Square size and set it as your background in seconds.
• As an Open Graph image. The 1200 by 630 preset is the exact size social platforms want for link previews, so a gradient with a title on top makes a clean share card.
• Behind a screenshot. A soft gradient is the fastest way to make a raw screen grab look intentional in a blog post, a slide, or a store listing.

This tool makes the gradient. Turning a raw screenshot into something that looks designed usually takes three more things, and doing them by hand for every capture gets old fast. That is the exact gap the Kapshot app closes on macOS.

You can build a mesh gradient in Photoshop or a Figma plugin. For a quick background, this free page gets you there faster and keeps everything on your device.