Mesh gradient generator with grain

What a mesh gradient is

A mesh gradient is a background where several colours melt into each other from different points, instead of running in one straight line. You have seen them behind app launches, on conference posters and as phone wallpapers: soft, a little dreamy, and calm enough to put words on. Design apps draw them on a grid of points (the "mesh"). This tool does the same idea in a simpler way: every colour has one dot, and every spot of the picture takes a mix of the colours, more of the ones whose dots are close.

Making one in four steps

1. Colours. Start from one of twelve ready sets: Sunset, Ocean, Aurora, Peach, Lavender, Mint, Neon, Citrus, Berry, Coast, Candy and Midnight. These are well-loved colour combinations, the kind designers reach for again and again. Then change any colour: press it to open the colour picker, drag in the shade square, slide the colour strip, type a code like #FF7A59, or tap a quick colour. Add up to 10 colours, remove any with ×, or press Shuffle colours. Shuffle never picks random colours: it takes one of 28 tried sets (the twelve plus Dusk, Lagoon, Cherry, Retro, Ice, Ember, Grape, Pastel, Tropic, Steel, Rose, Gold, Vivid, Slate, Olive and Meadow), and Add colour picks one that belongs with the set you are on, or a lighter or deeper version of it. You always keep at least two.
2. Look. Soft mesh lets colours melt; Glow puts bright spots on a dark base; Blobs gives rounder, clearer patches; Waves lays the colours in soft bands.
3. Grain. None, Fine, Film or Heavy. Grain adds tiny specks, like a printed poster.
4. Size. Web hero (1920 × 1080), Instagram post (1080 × 1350), Story or Reel (1080 × 1920), Desktop wallpaper (2560 × 1440), Link image (1200 × 630) or Square (1080 × 1080). Each card shows the real shape.

Then drag the dots on the picture to move each colour where you want it (on a computer, the arrow keys move a dot you have tabbed to). Shuffle keeps your colours and tries new places.

PNG, JPEG or SVG

PNG and JPEG come in 1x, 2x, 3x or 4x the picked size: a web hero at 4x is 7,680 × 4,320 pixels. They are made on your own device, not on our server, so nothing is uploaded. Phones have a limit on how big a picture they can make (iPhones and iPads stop around 16.7 million pixels), so the tool greys out the sizes your device can't make. The SVG describes the gradient instead of storing pixels, so it stays sharp at any size; its grain is drawn by the browser and looks a little softer.

The CSS version

Your CSS gives the gradient as plain CSS: one radial-gradient() layer per colour, placed where its dot sits, on a background colour. With grain, a small noise picture (an SVG drawn by the browser) sits on top and is blended in with background-blend-mode: overlay. The whole thing is a few hundred bytes, loads instantly and never goes blurry. The preview box beside the code is drawn by that CSS itself, so you see exactly what you paste. It is a little simpler than the picture, because CSS layers soften differently, so use the PNG or JPEG when the picture must match exactly.

Why grain helps

Smooth gradients can show faint stripes on some screens and in compressed pictures, called banding, because there aren't enough shades between two colours. A light grain breaks those stripes up, which is why so many gradient designs in 2025 and 2026 carry it. Fine grain is enough for websites; Film or Heavy suits posters and wallpapers. Grain does make files bigger, because tiny random specks don't compress well: that is the main reason to pick JPEG for a grainy post.

Text on a gradient

A gradient behind words looks good only if the words stay readable. Put the text over the calmest, most even part, keep it short and large, and check the contrast between the text and the colours behind it. Our colour palette generator checks any text colour against any background with the WCAG formula.

Karthik’s bakery launch

Karthik is opening a bakery in Kallakurichi in November 2026. He picks the Sunset set, changes the purple to his logo’s brown, adds a cream colour, and moves the yellow dot to the top left where the morning light would be. With Fine grain and the Post size he downloads a JPEG at 1x (about 400 KB) for his Instagram launch post, switches to Story for the same look as a Story, and copies the CSS for the top of his new website, so all three match.