# Noise gradients: smooth colour with a grainy finish

[Canonical HTML page](https://gradiently.design/guide/noise-background)

Noise gradients are easy to describe and fiddly to get right. These are five tested recipes, each with its colours, its noise settings and the reason they work, plus what every generator slider actually does.

## The short version

- A noise gradient is a smooth colour blend with a layer of fine random noise on top, which gives it a printed, tactile finish and hides banding.
- The two settings that matter most are noise frequency, which controls grain size, and opacity, which controls how strong it looks.
- Fractal noise at a frequency between 0.6 and 0.9, blended in Overlay or Soft Light at 8 to 20 percent opacity, suits most screen backgrounds.
- Dark noise gradients need less noise than light ones, because grain is most visible in shadows and mid tones.
- In CSS, noise can be drawn by an inline SVG `feTurbulence` filter, so it stays sharp at any size and needs no image file.

A **noise gradient** is a smooth colour blend with a fine layer of random noise laid over it, so the colour feels printed rather than rendered. The blend gives you the colour and the direction of light; the noise gives you a surface and stops the blend from breaking into bands. Below are five recipes you can copy, then a plain explanation of every generator setting so you can make your own.

## Five noise gradient recipes

Each recipe is a base gradient and a noise setting. The gradients are shown here without noise so you can see the colour; the table below gives the noise to add on top. They are deliberately different from each other: one dark, one light, one warm, one cool, one bold.

- 1. Night violet: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Peach paper: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Sunset poster: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Deep lagoon: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Clear blue: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

The five base blends, before noise. Click any to copy its CSS.

| Recipe | Frequency | Blend | Opacity | Why |
| --- | --- | --- | --- | --- |
| 1. Night violet | 0.85, 3 octaves | Overlay | 8% | Dark tones show grain easily, so keep it light |
| 2. Peach paper | 0.65, 4 octaves | Multiply | 10% | Multiply darkens only, so the light ground stays soft |
| 3. Sunset poster | 0.6, 3 octaves | Overlay | 20% | Bold colour carries heavier, coarser grain like a screen print |
| 4. Deep lagoon | 0.9, 2 octaves | Soft Light | 12% | Fine grain keeps a cool blend feeling clean |
| 5. Clear blue | 0.75, 3 octaves | Soft Light | 14% | Blue to pale blue bands badly; noise smooths it |

Noise settings for each recipe, using fractal noise in monochrome. Frequency and octaves map directly to the SVG filter in the code below.

## Noise gradient generator settings explained

Every [gradient generator](https://gradiently.design/guide/gradient-generator) with a noise option, and every SVG noise filter, uses some version of the same controls. Once you know what each one does you can read any recipe and fix any result.

| Setting | What it changes | Good starting point |
| --- | --- | --- |
| **Frequency** (scale, size) | Grain size. Higher is finer, lower is coarser. | 0.6 to 0.9 for screens |
| **Octaves** (detail) | Layers of detail inside the noise. More looks richer and costs more to draw. | 2 to 4 |
| **Type** | Fractal noise is soft and cloudy; turbulence is sharper and streakier. | Fractal noise |
| **Colour** | Monochrome keeps your palette exact; colour noise adds film-like specks. | Monochrome |
| **Blend mode** | How noise mixes with colour. Overlay adds contrast, Soft Light is gentler, Multiply only darkens. | Overlay or Soft Light |
| **Opacity** (amount) | Overall strength. | 8 to 20% |
| **Seed** | Which random pattern you get. Change it if you see a clump you dislike. | Any |

The controls behind every noise generator, in plain words.

> **Judge noise at the final size** Noise that looks right zoomed in on a laptop often vanishes on a phone or turns to mush after an upload. Check the export at the size people will see it, on the screen they will use.

## How to make a noise gradient in CSS

The cleanest method layers an SVG noise image over your gradient in one `background` declaration, then blends them. Swap the gradient for any recipe above and set the frequency and opacity from the table.

```css
.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%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.08;
}
```

Recipe 1 in CSS. The noise sits on a pseudo element below the content, so text stays crisp. `stitchTiles` makes the tile repeat without seams.

### The high contrast speckle method

For a bolder, almost risograph look, put the noise and the gradient in the same layer and push them through a contrast filter. The noise gets crushed into hard specks that follow the light of the gradient. It is louder than recipe 3, so use it for posters and hero banners, not behind body text.

```css
.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}
```

Contrast crushes soft noise into specks, and the strong brightness pushes the rest towards white. Multiply then lays the result over a coloured parent. Tune the two filter values together, and keep text in a separate layer above.

## Choosing the right noise for the format

Noise is relative to the canvas. The same filter reads as fine on a phone story and coarse on a small banner, so scale the frequency to the format rather than reusing one file everywhere.

A vertical countdown story on a grainy violet gradient background

A 1080×1920 story is seen up close on a phone: keep the noise fine and fairly light.

A wide website hero with a headline over a softly grainy warm gradient

A 1920×1080 website hero fills a large screen: lower the opacity, as large areas make noise obvious.

- **Stories and posts:** frequency around 0.8, opacity 8 to 14 percent. Slightly more than you think, as uploads soften it.
- **Website heroes:** frequency 0.7 to 0.9, opacity 4 to 10 percent. See [website hero backgrounds](https://gradiently.design/guide/website-hero-background).
- **Posters for print:** coarser grain, frequency 0.5 to 0.7 at the final pixel size, so it survives the press.
- **Dark backgrounds:** halve your usual amount. [Dark gradient backgrounds](https://gradiently.design/guide/dark-gradient-backgrounds) explains why shadows show grain first.

## Noise gradient or grainy gradient

They are the same idea with different emphasis. People say grainy gradient when they mean the look, and noise gradient when they mean how it is made. [Grainy gradients](https://gradiently.design/guide/grainy-gradients) covers why grain works and where to place it; this page is the recipe book. If you want texture without a colour blend, start with [grain texture](https://gradiently.design/guide/textured-background) instead.

If you would rather not tune sliders at all, every Gradiently Mark carries its own grain setting alongside its colours, light and motion, rendered fresh at every size so noise never stretches or blurs. Design with any unclaimed Mark for free.

## FAQ

### What is a noise gradient?

A smooth colour blend with a fine layer of random noise on top. The noise gives it a printed finish and hides banding.

### What noise settings should I use for a gradient?

Fractal noise, monochrome, a frequency of 0.6 to 0.9 and 2 to 4 octaves, blended in Overlay or Soft Light at about 8 to 20 percent opacity.

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

Layer an inline SVG with an `feTurbulence` filter over the gradient, on a pseudo element, and set `mix-blend-mode: overlay` with a low opacity.

### Why does my noise gradient look blurry after uploading?

Platforms recompress images and smooth out fine detail. Export at the exact platform size as PNG or high quality JPEG, and use slightly more noise for social posts.

### Is a noise gradient the same as a grainy gradient?

Yes, in practice. Grainy describes the look and noise describes the method used to make it.