Mesh Gradient Generator

Mesh Gradient Generator makes the soft, flowing colour backgrounds you see behind app screenshots, slides, phone wallpapers and landing pages. Instead of a straight line from one colour to the next, each colour sits on a point you can drag anywhere on the picture, and the colours melt into each other around them.

You choose three to eight points, how far each colour spreads, and how softly they blend. Three shapes change the character: Blobs for round pools of colour, Aurora for long ribbons that drift across the picture like the northern lights, and Waves for swirling bands. A grain slider adds fine film-like noise, which looks good and also stops the smooth areas from showing stripes once the image is compressed.

What makes this one different: colours are mixed in OKLab, a colour space built around how people see, so the in-between shades stay bright instead of turning muddy grey. The preview is the exact picture you download, drawn by our own code in your browser. Eight hand-picked palettes and a Randomise button give you a starting point, the PNG goes up to 4K and phone-wallpaper sizes, and the SVG and CSS versions are there when you need code instead of an image. Nothing is uploaded.

1. Pick a palette, or press “Randomise” for a fresh mix. Drag the round handles on the preview to move the colours.
2. Tap a colour chip (or a handle) to edit that point: change its colour, set its “Spread”, or press “Remove”. “Add” or a double-click on the picture adds a point.
3. Choose a shape (Blobs, Aurora or Waves) and set “Softness” and “Grain”. For Aurora and Waves, “New wave pattern” bends the ribbons a different way.
4. Under “Save it”, choose a size such as 1920 × 1080 or 1080 × 1920 for a phone, or type your own.
5. Press “Download PNG” for the image, “Download SVG” for a vector file, or “Copy CSS” to paste a background into your stylesheet.

• Three to eight colour points, each with its own colour and spread, dragged with a mouse, a finger or the arrow keys.
• Colours blended in OKLab, so mixes stay vivid and even.
• Three shapes: soft Blobs, ribbon-like Aurora and swirling Waves, each with a new pattern on demand.
• Softness and grain sliders; grain also hides the banding that smooth gradients get in compressed images.
• Eight palettes and a Randomise button that picks colours that sit well together, sometimes light and airy, sometimes deep with one bright accent.
• PNG at 1920 × 1080, 2560 × 1440, 3840 × 2160 (4K), square and portrait posts, stories, a large phone wallpaper, a link preview, or any size up to 8000 pixels a side.
• SVG made of soft shapes under a Gaussian blur, with grain built from SVG noise, at the size you chose.
• CSS as layered radial gradients, with a “CSS version” preview so you can compare it with the image before copying.
• Your last mesh and size are remembered in this browser.

• Put a dark colour and a light one at opposite corners and keep the brighter colours near the middle: text laid on top stays readable.
• For a calm background behind words, raise Softness and keep Grain low. For a poster or album cover, more Grain gives a printed, tactile feel.
• The SVG and CSS versions are close copies, not exact ones: browsers can’t mix colours point by point. Use the PNG when it has to look exactly like the preview.
• Very large PNGs need a lot of memory. If a phone struggles with 4K, choose 2560 × 1440; soft gradients scale up well.
• Move the same handle with the arrow keys (hold Shift for bigger steps) to nudge a colour into exactly the right place.