Website review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is Meshy?
Meshy is a browser-based design tool for generating mesh gradients. You give it a palette of four colors, and it produces a soft, multi-point gradient that blends those colors across the canvas. Each result is tied to an ID and the color hex codes, so the same combination acts as a seed: enter it again and you get the same gradient back rather than a new random one.
What you can do with it
- Set a palette: click the color swatches to swap in your own four colors.
- Randomize: press the randomize button to cycle through variants of that palette until one looks right.
- Export: save the gradient as a PNG, choosing the width and height you need.
A few curated presets sit in a column on the right if you would rather start from an existing look than build from scratch.
How the four colors behave
The palette is not blended evenly. Each color is assigned a different coverage area, so one hue might dominate a corner while another appears only as a small glow. That uneven weighting is what gives mesh gradients their depth compared with a simple two-color linear gradient, and it is the main thing to experiment with when a result feels flat.
Who it suits
Designers who need a background image for a landing page, app splash screen, or presentation slide, and who want something more organic than a standard CSS gradient. Because the output is a flat PNG, it drops into Figma, Photoshop, or a slide deck without any further setup.
Trade-offs to weigh
- Raster only, as described: the tool exports PNGs, so you cannot grab CSS or SVG code for a live, resolution-independent background. For responsive web use, that means either exporting at a generous size or accepting some scaling.
- Four colors fixed: the palette size is set at four, which keeps results coherent but limits very complex, many-hue blends.
- Randomized, not drawn: you steer by palette and by pressing randomize, not by dragging individual color points. That is fast when you want a quick result and less precise when you have an exact composition in mind.
A practical next step
Open the tool, click through the four swatches to enter your brand colors, then press randomize a handful of times before judging anything — the first variant is rarely the best. Once you land on one, note the ID or hex codes so you can reproduce it later, then export at the largest size you expect to need. For a website hero, that usually means exporting wider than your target container so the PNG still looks crisp on high-density screens.
If you also want code-based gradients for web work, Generate Mesh Gradients covers the image side, while a CSS gradient generator is worth keeping on hand for anything that needs to scale or animate.
How do I generate a mesh gradient with a specific color palette?
Use Meshy's generator by setting a four-color palette, then randomizing until you find the gradient you want and exporting it as a PNG at your chosen resolution.
Core workflow on Generate Mesh Gradients
- Set your palette. Click each of the four color swatches and enter or pick the hex values you want. The palette drives everything: each of the four colors is assigned a different coverage area, so the balance between them changes the look as much as the hues do.
- Randomize. Press the Randomize button to generate random variants. Because each result is tied to an ID and the color hex codes, the same combination acts as a seed — note the values if you want to recreate a specific gradient later.
- Export. Click save, set the width and height you need, and download the PNG at that custom resolution.
A practical example
Suppose you're building a hero section for a fintech landing page and want a background that reads as deep navy with a warm accent:
- Set three swatches to close navy and slate tones, and one to a warm amber.
- Randomize repeatedly and watch how the amber's coverage area shifts — a small amber region reads as a glow; a large one competes with your headline text.
- Once the composition works, export at the exact pixel dimensions of your hero container so the gradient isn't rescaled and softened by the browser.
Decision criteria
| If you need… | Do this |
|---|---|
| A gradient matching brand colors exactly | Fix all four swatches to your brand hex codes before randomizing |
| A repeatable result for a design system | Record the gradient ID and the four hex codes as your seed |
| A subtle background behind text | Keep contrast low between the four colors and export at final display size |
| A bold, poster-like graphic | Spread the palette across a wider hue range, then randomize for a pleasing distribution |
Where it fits
This is a browser-based tool for designers, developers and marketers who need a decorative background quickly without opening a full vector editor. It is best treated as a starting point: the presets in the right-hand column are useful for seeing what a well-balanced four-color mesh looks like before you commit to your own palette. If you need editable vector output or fine control over individual mesh points, you'll want a dedicated illustration tool instead, since the export here is a raster PNG.
If you're unsure about a palette, start from one of the curated presets, then swap the swatches one at a time toward your target colors. That keeps the coverage balance intact while you shift the hues, which is usually faster than building a palette from scratch.
How can I download a mesh gradient as a PNG at a custom resolution?
Use the tool's save step and set the width and height before exporting. On Generate Mesh Gradients, the download flow is: choose your four palette colors, press Randomize until a variant looks right, then click Save, enter your target width and height, and download the PNG. The page describes each generated gradient as tied to an ID and color hex codes that act as a seed, so a result you like can be recreated later rather than lost after randomizing.
A practical workflow
- Fix the palette first. Click the colors to change the selected palette. Because only four colors are used and each covers a different share of the area, swapping one color shifts the balance more than you might expect.
- Randomize with intent. Each press produces a different variant of the same palette. Stop when the color placement suits your layout, not just when the colors look pleasant on their own.
- Save at the size you actually need. Enter width and height in the save dialog to get a custom-resolution PNG.
Choosing a resolution
| Use case | What to aim for |
|---|---|
| Full-width hero background | Match the container's widest rendered width, and allow headroom for high-density displays |
| Card, thumbnail or avatar backdrop | Export at roughly the size it will display, since a large PNG gains nothing when scaled down |
| Slide or presentation cover | Match the slide aspect ratio so you don't crop the color placement |
| Print or large-format | Export oversized; mesh gradients are smooth, so upscaling usually shows less artifacting than with detailed images |
Aspect ratio matters as much as pixel count. If you export a square and place it in a wide banner, the edges you cropped may have held the most interesting color transitions. Decide the final shape before you export, and re-randomize if the composition only works in its original proportions.
Trade-offs to keep in mind
PNG is lossless, so file size grows quickly with resolution and with smooth color blends. That's fine for a hero image or a print asset, but a 4000-pixel PNG behind a small UI card is wasted weight. Export the smallest size that still looks crisp at its display size, and keep the seed details (the ID and hex codes) recorded if you may need to regenerate the same gradient later at a different resolution.
Why does the same color palette sometimes produce different gradients?
The palette is an input, not the whole recipe. On Meshy, each generated gradient is tied to an ID and the color hex codes, and that combination acts as a seed. Change the seed and the same four colors get arranged differently: different coverage areas, positions and blends.
What stays fixed vs. what changes
| Fixed by the palette | Changed by the seed / generation |
|---|---|
| Which four colors are in play | How much area each color covers |
| The hex codes themselves | Where each color sits and how it blends into the next |
| The overall color mood | The specific shapes and soft transitions |
The page also notes that each of the four colors is associated with a different amount of coverage area, so the palette defines the ingredients while the seed decides the proportions and placement. That is why two gradients can look related yet clearly distinct.
Practical next step
If you want the exact same gradient again, keep both the palette and the generation reference unchanged rather than re-picking the same four colors. If you only want a variation, keep the palette and generate again until the coverage and blending suit your layout, then export at the width and height you need.
A concrete scenario: you are building a hero background and like a warm four-color palette. The first generation may put most of the canvas in the lightest tone, which washes out white text; regenerating with the same palette can shift coverage toward the darker colors without abandoning your brand colors. That is the useful trade-off — palette controls consistency, the seed controls composition.
Can I recreate a previously generated mesh gradient later?
Yes. Meshy is built so a generated mesh gradient is tied to its ID and color hex codes, and those act as a seed. If you keep that information, you can recreate the same gradient later instead of hoping the randomizer lands on it again.
What you need to save
- The gradient's ID
- The color hex codes in the palette
- The order or role of those colors, since each color is associated with a different coverage area
- The export width and height if you want the same PNG dimensions
The practical takeaway: treat the ID plus hex palette as your recipe. The random variants come from that seed, so the same seed should reproduce the same gradient.
A realistic use case
Suppose you are building a landing page and find a mesh gradient you like for the hero section. Before you click Randomize again, copy the ID and the four hex codes into your project notes or design file. Months later, when you need a matching banner or social image, you can enter that same seed and palette rather than trying to eyeball the colors.
Limits worth knowing
The ID and hex codes recreate the gradient behavior, but the PNG itself is a separate file. If you already downloaded the PNG, you have the image; if you only saved the seed, you can regenerate it and export at a new resolution. Saving both is the safest approach.
For a quick next step, generate a gradient, then immediately record the ID and hex codes alongside the downloaded PNG. That way you can rebuild it later and also resize it for different placements.
What are the preset mesh gradients and how do I use them?
Preset mesh gradients are ready-made starting points: instead of choosing four colors from scratch, you pick a curated combination and then adjust it. On Generate Mesh Gradients, the presets sit in the column on the right, and each one is a saved palette of four colors arranged as a soft, blended mesh rather than a simple linear fade.
How to work with a preset
- Click a preset in the right-hand column to load its four-color palette.
- Click any color swatch to swap in your own color; each color covers a different share of the image, so changing one shifts the balance rather than just tinting it.
- Press Randomize to generate a new random variant. The result is tied to an ID and the color hex codes, so the same combination can be recreated later — useful if you want a family of related backgrounds.
- Click Save, set width and height, and export a PNG at the resolution you need.
When a preset is the right choice
Presets save time when you need a background that already looks balanced — for a landing-page hero, a slide title, a social post, or an app onboarding screen. Starting from a curated four-color set is usually faster than building harmony by hand, especially if you are not confident matching colors.
The trade-off is distinctiveness. Presets are shared, so a popular one can appear across many projects. If the gradient is a core part of your brand, load a preset and then replace at least two of the four colors with your own palette values before exporting.
A practical test
Export two versions — one untouched preset and one with your colors swapped in — and view both at the actual size they will be used. Mesh gradients often lose their softness when scaled down to a small thumbnail or compressed in a social preview, so the version that looks best full-screen is not always the one that reads well in context.
User reviews (0)