Noise gradients: smooth colour with a grainy finish

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.

Noise gradient generator settings explained

Every 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.

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.

.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;
}

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.

.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 */
}

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.

• 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.
• 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 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 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 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.