How to Export a Mesh Gradient PNG at a Custom Resolution on meshgradient.in

Updated

You can generate a mesh gradient and export it as a PNG at any width and height you set yourself. On meshgradient.in the flow is: pick or adjust the four-color palette, press Randomize until you like the result, then click Save and enter your target width and height before downloading. Because each gradient is tied to an id and its color hex codes, the same combination can be recreated later, so you don't have to worry about losing a design you liked.

What you need before starting

  • A browser and access to meshgradient.in — no account or sign-in is mentioned in the site's steps.
  • A rough idea of your target resolution (for example, 1920×1080 for a desktop wallpaper or 1080×1080 for a square post).
  • Optional: a color palette in mind. If not, the presets on the right column give you a starting point.

Step-by-step: generate and export a mesh gradient PNG

1. Start from a preset or the four-color palette

The right column holds a few curated mesh gradient presets, so you can begin from something close to what you want instead of building from zero. The generator itself works from a palette of only four colors, and each color is associated with a different amount of coverage area — meaning one color may dominate while another appears only in a small region. Changing a color therefore changes both the hue and how much of the canvas that hue occupies.

2. Change colors and randomize

  1. Click on the colors to change the selected color palette.
  2. Press the Randomize button to generate a random variant. Repeat until you find the gradient you want.

Randomize is the main creative lever here: the palette stays as your constraint, while each press produces a new arrangement of those four colors across the mesh.

3. Understand how to reproduce the same gradient

Each generated gradient is unique to its id and color hex codes, which act as a seed to recreate it. In practice this means:

  • If you note the id and the hex values of your four colors, you can regenerate the same gradient later.
  • Two gradients with the same palette can still look different, because the random variant differs.
  • If you want a family of related gradients, keep the palette fixed and only vary the randomize step.

4. Save and set a custom resolution

  1. Click Save.
  2. Adjust the width and height to your target dimensions.
  3. Download the PNG.

The export is a PNG at the resolution you specify, so the width and height you enter here — not the on-screen preview size — determine the final file.

Quick reference

Action Where / how Result
Change palette Click on the colors New four-color combination, with different coverage per color
Explore variants Randomize button A new random arrangement of the same palette
Recreate a gradient Same id + same color hex codes The same gradient again
Export Save → set width & height PNG at your custom resolution
Fast start Presets in the right column A curated gradient to modify

Common snags to check before you download

  • Wrong dimensions. The width and height are set at the Save step, so confirm them there rather than assuming the preview size carries over.
  • Palette drift. If you keep clicking colors after finding a good result, you've changed the seed inputs. Note the hex codes first if you may want to return to it.
  • Coverage surprises. Since each of the four colors covers a different amount of area, swapping a color can shift the balance of the whole gradient, not just one region.
  • No perfect match on the first randomize. The Randomize button is meant to be pressed repeatedly — treat it as iterating toward the result rather than a one-shot generate.