# Grainy gradients: why a little noise makes colour look expensive

[Canonical HTML page](https://gradiently.design/guide/grainy-gradients)

A clean gradient looks like a screen default. The same gradient with a fine layer of grain looks like a print, a film still or a painted wall. Here is why, how much to add and how to do it.

## The short version

- A grainy gradient is a colour blend with a fine layer of random noise over it, so the surface looks textured rather than perfectly smooth.
- Grain hides banding, because random variation breaks up the visible steps between the limited shades a screen can show.
- Grain makes digital colour read as physical, recalling film, risograph print and matte paper.
- Grain should be felt more than seen: start subtle, check at full size, and add more only where the surface is large and calm.
- In CSS, the usual method is an SVG feTurbulence noise layer placed over the gradient with a blend mode and a low opacity.

A **grainy gradient** is a gradient with a fine layer of random noise laid over it, so the colour has a visible texture instead of a perfectly smooth, digital surface. It became popular for a practical reason and a visual one: grain hides the stripes that smooth blends often show, and it makes colour on a screen look like something printed, filmed or painted. Done well, most people won't notice the grain at all. They will just think the colour looks better.

## Why grain makes a gradient look better

There are three reasons, and they compound.

- **It hides banding.** Most images carry 256 shades per colour channel. A gentle blend across a large area has to step between them, and your eye picks out the steps as stripes. Random noise scatters pixels across neighbouring shades, so the edges between steps disappear. This is the same idea as dithering. See [gradient banding](https://gradiently.design/guide/gradient-banding).
- **It adds tactility.** Physical things are never perfectly smooth. Film has grain, paper has tooth and printed ink sits unevenly. A small amount of noise borrows those associations, so a flat digital blend starts to feel like a material.
- **It survives compression better.** Social platforms and messaging apps recompress images. Smooth blends are exactly what heavy compression flattens into blocks, and a fine grain gives the encoder detail to hold on to. Test your export, though: very strong compression can smear grain too.

A portrait post titled Soft light on a gradient with a fine visible grain

On a Mark, grain is part of the recipe, rendered live together with the colour.

A square version of the same grainy gradient post

At a square size the Mark is rendered again for the format, so the grain stays fine instead of being scaled up.

## How much grain to add

The most common mistake is too much. Heavy grain looks like a dirty lens or a low-light phone photo. The right amount depends on the size of the calm area, how dark the gradient is and where it will be seen. Treat the numbers below as starting points for a noise layer in the Overlay or Soft Light blend mode, then judge by eye at full size.

| Use | Starting opacity | Grain size |
| --- | --- | --- |
| Interface backgrounds, behind body text | Around 5 to 10% | Fine |
| Social posts and hero sections | Around 10 to 20% | Fine to medium |
| Posters, album art, bold editorial looks | Around 20 to 35% | Medium to coarse |
| Dark gradients prone to banding | Enough to hide the steps, no more | Fine |

Starting points, not rules. Always check the grain at 100% zoom on the device it will be seen on.

> **The squint test** Zoom to 100%, look at the design, then step back. If you can see the grain from a normal viewing distance on a text-heavy design, halve it.

## Where to put the grain

Grain does not have to be even. It looks most natural on large, calm areas of colour and on dark tones, where film grain is most visible in real life. Keep it lighter behind small text, because noise at the edges of letters makes them look soft. And keep your logo and type above the grain layer, not under it, so they stay crisp.

### Avoid

- Grain so strong it reads as dirt or low light
- Grain over logos and small text
- A small grainy image scaled up, so the grain turns into blotches
- Coloured, rainbow-speckled noise on a calm palette

### Do

- Grain you feel more than see
- Type and logos above the grain layer
- Grain rendered or tiled at the final size
- Monochrome noise blended into the colours below

## How to add grain to a gradient in CSS

The lightest method is an SVG noise filter used as a background image. `feTurbulence` generates random noise, `feColorMatrix` removes its colour so it doesn't speckle, and a blend mode mixes it into the gradient below. Higher `baseFrequency` values make finer grain; `stitchTiles` makes the tile repeat without seams.

```css
.grainy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
}
```

A gradient with monochrome grain in the Overlay blend mode. The `z-index: -1` inside an isolated parent keeps the grain above the gradient but below any text.

If you prefer an image, a small tiling noise image saved as PNG works the same way as the SVG. Keep it lossless: JPEG noise tiles pick up compression artefacts. For more patterns and texture tricks without images, see [CSS noise texture](https://gradiently.design/guide/css-noise-texture).

## How to add grain in design tools

1. **Build the gradient first** Get the colours, stops and composition right on a clean layer. Grain can't rescue a muddy blend; see [muddy gradients](https://gradiently.design/guide/muddy-gradients).
2. **Add a separate noise layer** Use the tool's noise effect or a noise texture on its own layer above the gradient, so you can adjust it without touching the colour.
3. **Make it monochrome** Desaturate the noise so it doesn't add coloured speckles, then set the layer to Overlay or Soft Light.
4. **Lower the opacity until it disappears, then go back a little** The right amount is usually just above the point where you stop noticing it.
5. **Export at the final size, lossless if you can** Scaling a grainy image up enlarges the grain into blotches. Export PNG at the exact size, or a high-quality JPEG for photos.

## Grain in print

Grain designed for a phone screen can behave differently on paper. At 300 dpi, very fine noise may vanish entirely, and coarse noise can look like a printing fault. For posters and flyers, make the grain at print resolution and proof it on the real stock. [Print gradients](https://gradiently.design/guide/print-gradients) covers the rest of the process.

Grain is also one of several materials. Paper, glass and silk each change what a gradient says; [gradient texture](https://gradiently.design/guide/gradient-texture) compares them. Every Mark carries its own grain setting alongside its colours and materials, so the balance is already set when you start designing.

## FAQ

### What is a grainy gradient?

A grainy gradient is a colour blend with a fine layer of random noise over it, so it looks textured like film or print instead of perfectly smooth.

### Does grain fix gradient banding?

Usually, yes. Random noise breaks up the hard edges between the limited shades a screen can show, so the stripes stop being visible.

### How do I add grain to a gradient in CSS?

Layer an SVG `feTurbulence` noise image over the gradient, desaturate it, set `mix-blend-mode: overlay` and use a low opacity.

### How much grain should I add?

Less than you think. Start low, check at 100% zoom on the target device, and stop just after the grain stops being obvious.

### Why does my grain look blotchy?

The image was probably scaled up after the grain was added. Add grain at the final export size, or use a tiling noise texture.