What is noise texture?

Noise texture adds a subtle grain or film effect to surfaces, reducing the flat, sterile look of solid colors and gradients. It mimics the natural imperfections of physical materials like paper, fabric, and painted walls.

Types of noise

Perlin noise: smooth, organic-looking noise invented by Ken Perlin for the 1982 film Tron. Creates natural-looking terrain, clouds, and textures.
Simplex noise: an improved version of Perlin noise with fewer directional artifacts and better performance in higher dimensions.
White noise / static: completely random pixel values. Creates a film grain or TV-static effect.
Fractal noise: multiple octaves of noise layered together for complex, detailed textures.

Using noise in design

Add noise as a semi-transparent overlay on gradients or solid colors for a tactile feel. A typical approach: export the noise as a PNG with a transparent background, then layer it with CSS: background-blend-mode: overlay or as a ::after pseudo-element with low opacity.

Ken Perlin's history

Perlin noise was created by Ken Perlin while working on the 1982 film Tron at MAGI Synthavision. The algorithm solved the problem of generating natural-looking procedural textures for 3D surfaces without repetitive tiling artifacts. In 1997, Ken Perlin received an Academy Award for Technical Achievement for this invention. In 2001, he introduced Simplex noise as an improved replacement - it has fewer directional artifacts, better visual isotropy (looks the same from all angles), and scales more efficiently to higher dimensions.

Noise parameters guide

Fractal noise is constructed by layering multiple octaves of base noise, each at a different scale and amplitude. Three key parameters control the result:

Octaves: the number of noise layers stacked together. More octaves add finer detail. A single octave produces smooth, rolling hills; 6–8 octaves produce rugged mountain terrain or detailed clouds.
Persistence (amplitude falloff): how much each successive octave contributes relative to the previous one. A persistence of 0.5 means each octave has half the amplitude of the last. High persistence (near 1.0) makes all octaves contribute equally - very rough, spiky output. Low persistence (0.2–0.3) gives smooth output with subtle detail.
Lacunarity (frequency multiplier): how much the frequency increases per octave. A lacunarity of 2.0 means each octave doubles the frequency. Higher lacunarity adds more high-frequency detail between large features.

CSS implementation

To layer an exported noise PNG as a subtle texture overlay:

.textured-element { 
  position: relative;
}
.textured-element::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('noise.png');
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.05; /* 3–8% for a subtle, professional effect */
  pointer-events: none;
}

Keep opacity between 3–8% for a tasteful grain. Higher values look noisy rather than textured.