Craft

Noise

Large flat fills can feel sterile. A hero gradient, a card cover, or an empty state is often just one smooth color ramp, and on some screens that ramp also shows banding: visible steps between the colors.

A thin layer of noise fixes both. The grain adds a texture the eye barely registers, and it breaks the color steps apart so the banding disappears.

You do not need an image file for this. SVG can generate the grain with feTurbulence, and a CSS filter applies it. Move the slider to find the point where the surface stops feeling flat.

Weekly digest

Your projects, summarized every Friday.

Around 5 to 10% the grain reads as texture. Push it past 30% and the surface starts to look like a compressed image.

Grain size

baseFrequency controls how fine the grain is. Higher values pack more detail into the same space.

The opacity is raised here so the pattern is easy to see. Low values look like static from an old TV. Values near 0.8 look like film grain.

Values between 0.6 and 1 read as fine film grain, which is what most interfaces want. Go much lower and the pattern turns into visible static.

On real surfaces

The difference is easier to judge on a real component than on a swatch. Toggle the cover of this card.

The flat gradient is clean, but it can feel like a placeholder.

The effect should be almost subliminal. If someone can point at the grain, it is too strong. Keep it off text and away from small UI, where it only hurts legibility.

Usage

The filter is defined once in the document. An empty overlay element renders it, because an element with a turbulence filter is painted entirely by the filter output.

<div class="hero">
  <div class="noise" aria-hidden="true"></div>
</div>

<svg width="0" height="0" aria-hidden="true">
  <filter id="noise-filter">
      <feTurbulence baseFrequency="0.8" />
  </filter>
</svg>
.hero {
  position: relative;
}

.noise {
  position: absolute;
  inset: 0;
  filter: url(#noise-filter) grayscale(100%);
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Three details make this work:

  • grayscale(100%) removes the colored speckle that turbulence produces.
  • A blend mode like overlay or soft-light melts the grain into the surface instead of sitting on top of it.
  • The layer is decorative, so it gets aria-hidden and pointer-events: none.

Resources

Search concepts

Search for a command to run...