Grainy Gradients

How to make a grainy gradient in CSS

A grainy gradient is an ordinary CSS gradient with a layer of fine noise on top. The noise breaks up the smooth colour bands that gradients show on large screens, and gives flat UI a printed, tactile feel. You can do it with no image file at all: CSS can draw the noise itself with an inline SVG filter.

1. Make the noise with an SVG filter

SVG’s feTurbulence filter generates random noise. The rest of the filter turns it grey, makes it opaque, and boosts its contrast so it reads as grain rather than haze:

<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>
  <filter id='g' color-interpolation-filters='sRGB'>
  <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/>
  <feColorMatrix type='saturate' values='0'/>
  <feComponentTransfer>
  <feFuncR type='linear' slope='2.5' intercept='-0.75'/>
  <feFuncG type='linear' slope='2.5' intercept='-0.75'/>
  <feFuncB type='linear' slope='2.5' intercept='-0.75'/>
  <feFuncA type='linear' slope='0' intercept='1'/>
  </feComponentTransfer>
  </filter>
  <rect width='100%' height='100%' filter='url(#g)' opacity='0.35'/>
  </svg>

baseFrequency sets the grain size: higher is finer (0.9), lower is coarser (0.4). The opacity on the rectangle sets how strong the grain is.

2. Put it on top of the gradient

URL-encode the SVG into a data: URI and list it before the gradient in background, so it sits on top. Then blend it with overlay:

.grainy {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E"),
              linear-gradient(135deg, #FF6B6B, #845EC2);
  background-blend-mode: overlay, normal;
}

overlay is what makes it look like grain rather than a grey film. The noise averages out at mid-grey, and mid-grey is neutral under overlay, so the gradient keeps its colours. Each speck only nudges the colour beneath it a little lighter or darker.

3. Tune it

• Strength: 20–40% suits most interfaces. Above 50% is a deliberate, risograph-style look.
• Size: fine grain for app backgrounds and cards, coarse grain for posters and hero sections.
• Dark gradients show grain less, so they usually need a little more.
• Text contrast: grain barely changes the average colour, so check contrast against the gradient itself.

Tailwind CSS

Tailwind has a utility for the blend mode, bg-blend-overlay. Add the noise and the gradient as one named background in your config, then use both classes together:

// tailwind.config.js
theme: {
  extend: {
    backgroundImage: {
      'grainy-sunset': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.35'/%3E%3C/svg%3E"), linear-gradient(135deg, #FF6B6B, #845EC2)`,
    },
  },
},

<div class="bg-grainy-sunset bg-blend-overlay"></div>

Browser support and performance

background-blend-mode and SVG filters in data: URIs work in every current browser, including Safari, Chrome, Firefox and Edge. The browser draws the 220×220 noise tile once and repeats it, so it costs about the same as a small background image.