How Do I Download a Mesh Gradient PNG at a Custom Resolution from meshgradient.in?

Updated

Open meshgradient.in, adjust the four-color palette until the gradient looks right, then click Save and enter your target width and height to download a PNG at that exact resolution. This works for any size you need — the tool exports the gradient as a PNG rather than a fixed preset image. The steps below cover the full flow, plus how to recreate a gradient later using its seed.

What the generator gives you

The tool (called "Meshy" on the site) builds a mesh gradient from a given color palette. Two things shape the result:

  • A four-color palette. Each of the four colors covers a different amount of area in the gradient, so swapping a color changes both the hue and how much of the canvas that hue occupies.
  • A seed based on id and color hex codes. Each generated gradient is unique to its id and hex codes, and those values act as a seed — meaning the same id and colors reproduce the same gradient later.

The right-hand column holds a few curated preset mesh gradients you can start from instead of building from scratch.

Steps to generate and download

  1. Click on the colors to change the selected palette. This is how you set the four hues that drive the gradient.
  2. Press the Randomize button to generate a random variant. Keep pressing until you land on the gradient you want — each press produces a new random arrangement from your palette.
  3. Click Save, then adjust width and height to download a PNG at your custom resolution.

The expected result after step 3 is a PNG file sized to the width and height you entered, saved through your browser's normal download behavior.

Recreating the same gradient later

Because the gradient is seeded by its id and color hex codes, note those values if you think you'll want the exact same gradient again. Re-entering the same id and hex codes reproduces it, so you don't have to hunt through random variants a second time.

If the download doesn't match what you expect

  • Wrong resolution: re-open Save and re-check the width and height fields before exporting — the exported PNG matches the numbers you enter there.
  • Download doesn't start: check your browser's download settings and whether it's blocking or silently saving the file to a default folder.
  • Gradient looks different from before: confirm you're using the same id and hex codes, since those are what reproduce a specific gradient.