What is a grainy gradient?

It is a color gradient covered with fine grain, like a film photo or a print. The grain gives the visual texture and hides the banding that often appears in smooth gradients.

How do I make a grainy gradient for free?

Open pixisgood’s Gradient tool, pick a preset or place your color points, then adjust the Grain slider in the Texture section. PNG, SVG or MP4 export is free, with no sign-up.

Why does my gradient show bands?

A screen can only show a limited number of shades: over a large area, the step from one shade to the next becomes visible, and social media compression makes it worse. A little grain and a PNG export rather than JPEG make the bands disappear.

How much grain should I use?

Start around 15 to 25% and judge the image at real size. Go higher for a poster or an album cover, stay subtle behind long text or on a small format.

Is the grain kept in the SVG?

In the Background tool, yes: an option adds the grain to the SVG as an image. In the Gradient tool, the Vector rendering gives real gradients you can edit in Illustrator, without grain, to add afterwards if needed.

How to make a grainy gradient background

Why grainy gradients are everywhere

Album covers, festival posters, website backgrounds, brand stories: the gradient with grain, often called a grainy gradient, has replaced the smooth gradient of the 2010s. It appeals for three reasons:

It has texture. Grain evokes paper, print or film, and gives a digital visual a warmer, almost tactile feel.
It hides the “steps”. A smooth gradient often shows visible bands, especially after social media compression. Grain blurs these steps and makes the transition look continuous.
It goes with everything. A grainy background stays discreet behind a title, a cut-out photo or a product, while avoiding a flat, cold fill.

1. Choose the colors

A beautiful gradient starts with a short palette. Three to five colors are enough; beyond that, it quickly gets muddled.

Neighboring colors (pink, orange, pale yellow) give a soft gradient that is easy to place behind text.
One dark color among light ones creates depth, like a shadow or a night sky.
Watch out for opposite colors (blue and orange, green and pink): blended the classic way, they go through a gray, dull area in the middle. The Gradient tool blends colors in a space designed for the eye (OKLab), which keeps transitions luminous even between distant colors.

To build the palette itself, the method is detailed in our guide to creating a harmonious color palette.

2. Give the gradient a shape

A linear gradient, from one edge to the other, quickly looks ordinary. A “mesh” gradient, with several color points blending in every direction, is more organic:

Place the vivid colors near the edges and the light tints toward the center if text is going to sit there.
Add a little ripple for a fabric or smoke effect, and a slight swirl to break the symmetry. A little is enough: pushed too far, the gradient looks like a psychedelic wallpaper.
Adjust the zone sharpness: soft for a hazy, blurred background, crisper for well-defined patches of color.

In the Gradient tool, the points move right on the preview, and the space bar draws a new random gradient when you run out of ideas.

09Try the free toolGradientFluid gradients and iridescent 3D reliefsOpen →

3. Get the grain right

The grain is what makes the style. A few rules to keep it elegant:

Start subtle, around 15 to 25%, then increase. Strong grain suits a poster or an album cover; behind long text, keep it light.
Grain that is more visible in the midtones than in deep blacks and pure whites looks natural, like on film. A uniform noise laid on top looks more like a “filter”.
Adapt the grain size to the use: very fine for a phone screen, a bit coarser for a video, because compression smooths out the finest details.
Judge it at real size, not on a thumbnail: grain disappears when small and shows up once the image is displayed large.

4. Go beyond the simple gradient

The grainy gradient has several cousins, just as popular:

Blurred silhouettes in color bands: blurry shapes cut into crisp steps, with grain and dithering. That is the “Crowd” style of the Background tool, which also adds a vignette and print-style dithering.
Marbled paper and contour lines, for a more graphic but still textured background (“Marble” and “Terrain” styles of the Background tool).
Iridescent relief: the Gradient tool’s “3D relief” rendering turns the colors into a smooth volume crossed by a rainbow sheen, very close to holographic visuals.

02Try the free toolBackgroundGrainy gradients, marble, terrain and still lifesOpen →

5. Export without damaging the grain

For a still image, prefer PNG. JPEG compresses precisely small details like grain, and brings back the bands it was meant to hide.
For an animated background, export as MP4: the grain moves from one frame to the next, like on film, instead of staying frozen like a dirty window.
For a file you can edit in Illustrator, switch the Gradient tool to “Vector” rendering: the SVG contains real editable gradients, without grain. Add the texture afterwards in your software, or use the Background tool, which can include the grain in the SVG as an image.
Choose the right format from the start (square, portrait, story) so the social network doesn’t crop your gradient: the sizes are in our guide to social media image sizes.

Mistakes that spoil a grainy gradient

Too many colors: beyond five, the gradient loses its character and looks like a smudge.
Grain too coarse on a small format: on an avatar or a thumbnail, it turns into dirty noise.
Text placed on the most contrasted area: put your titles on a calm, light (or dark) part of the gradient, not on the border between two strong colors.
A noisy photo, then grain on top: if you add grain to a photo, start from a clean image. The Grain tool applies fine grain and other retro textures to your own images.

04Try the free toolGrain14 image effects and retro post-processingOpen →

Make a grainy gradient background