How Do I Generate and Export a Mesh Gradient PNG on meshgradient.in?

Open meshgradient.in, pick the four colors that make up your palette, press Randomize until a variant looks right, then click Save and set your width and height to download a PNG at that resolution. This works for anyone who needs a background, hero image, or design asset without installing software. The tool is built around a four-color palette, and each gradient is tied to an id and color hex codes, so the same inputs recreate the same result.

What the tool actually does

Meshy, the generator on meshgradient.in, produces mesh gradients from a given color palette. Two details matter for how you work with it:

• Four colors, unequal coverage. The palette uses only four colors, and each color is associated with a different amount of coverage area. Changing a color doesn't just swap a hue — it also changes how much of the canvas that color occupies.
• Deterministic output. Each generated gradient is unique to an id and color hex codes, which behave as a seed. If you keep the same palette and id, you get the same gradient back.

The right-hand column holds a few presets of curated mesh gradients if you want a starting point rather than building from scratch.

Step-by-step: generate and export

1. Change the palette colors

Click on the colors to change the selected color palette. Each of the four swatches feeds into the gradient, so decide which colors should dominate and which should sit in the background — coverage area shifts with the palette, not just the hue.

2. Randomize until you find the one

Press the Randomize button to generate a random variant. Repeat until you find the perfect gradient. Because the result is seeded by the id and hex codes, you can stop randomizing once you land on something you like and it will stay reproducible.

3. Save and set the resolution

Click Save and adjust width and height to download custom-resolution PNGs. Enter the dimensions your project needs — for example, 1920×1080 for a desktop hero or 1080×1080 for a square social post — before downloading.

Quick reference

Common snags

• The gradient looks different after you change one color. Expected — each color carries its own coverage area, so a single swap reshuffles the composition.
• You can't find the exact variant again. Keep the id and the four hex codes; those are the seed. Without them, randomizing won't reliably return the same result.
• The download isn't the size you wanted. Set width and height in the Save step rather than scaling the PNG afterward, so you export at the resolution you actually need.

If you only need a one-off background, randomize a few times and export. If you're building a system of assets, lock in your palette and record the id and hex codes so every gradient in the set stays reproducible.