SVG feTurbulence: noise, grain and texture filters

SVG feTurbulence is a filter primitive that fills its region with Perlin noise. On its own the result is a field of coloured static; combined with other primitives it becomes film grain, paper fibre, clouds, marble or a source for warping shapes. You control it with five attributes: type, baseFrequency, numOctaves, seed and stitchTiles. Most textures on modern websites, including the grain on grainy gradients, start here.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#noise)" />
</svg>

What each feTurbulence attribute does

baseFrequency is the one you will touch most. It is measured in cycles per user unit, so 0.8 packs features close together and 0.02 stretches them into slow clouds. Two values, such as baseFrequency="0.01 0.3", stretch the noise along one axis, which is how brushed metal and wood grain are faked.

Recipe: grain over a gradient

The most useful thing feTurbulence does is add grain. A clean digital gradient bands into visible stripes, especially dark ones; light noise breaks those stripes up and makes the surface feel printed. The steps: make the noise, strip its colour, then lay it over the gradient at low strength.

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
  <filter id="grain" x="0" y="0" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" result="noise" />
    <feColorMatrix in="noise" type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#grain)" />
</svg>

Save that as grain.svg or inline it as a data URI, then tile it in a pseudo element above the gradient.

.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/grain.svg");
  background-size: 240px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Recipe: paper texture

Paper is low frequency noise turned into relief by a light source. feDiffuseLighting treats the noise as a height map and lights it from one side, which produces the soft hills of a sheet of cotton paper.

<filter id="paper" x="0" y="0" width="100%" height="100%">
  <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" result="noise" />
  <feDiffuseLighting in="noise" lighting-color="#f7f1ea" surfaceScale="2" result="lit">
    <feDistantLight azimuth="45" elevation="60" />
  </feDiffuseLighting>
  <feBlend in="SourceGraphic" in2="lit" mode="multiply" />
</filter>

Pair it with warm off white grounds. Paper texture backgrounds has palettes that suit it.

Recipe: warped edges with feDisplacementMap

Noise can also move pixels. feDisplacementMap reads the noise and shifts each pixel of the source by up to scale units, which gives hand drawn lines, melting type and rippled water.

<filter id="wobble">
  <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" seed="3" result="warp" />
  <feDisplacementMap in="SourceGraphic" in2="warp" scale="10" xChannelSelector="R" yChannelSelector="G" />
</filter>

<text x="40" y="120" font-size="96" font-weight="700" filter="url(#wobble)">Wavy</text>

Performance and browser behaviour

feTurbulence works in every current browser, but it is computed on the CPU in many of them and its cost grows with area and octaves. A 240 pixel tile is calculated once and repeated, which is cheap. A full screen filter on a live element is recalculated whenever the element repaints, which can be slow on phones.

1. 1

   Tile it

   Render noise into a small SVG with stitchTiles="stitch" and repeat it as a background image.

2. 2

   Keep octaves low

   numOctaves above 4 rarely adds visible detail at grain sizes and costs every time.

3. 3

   Avoid animating it

   Animating baseFrequency or seed forces a full recalculation every frame. Shift a static tile with a transform instead.

4. 4

   Check both themes

   Grain that looks right on dark can look dirty on light. Tune opacity per theme, as in dark mode gradients.

For a CSS only take on the same idea, see CSS noise texture. And if you want grain without tuning filters at all, every Gradiently Mark carries its own grain and material as part of its recipe, rendered live at whatever size you design.