CSS Noise & Texture Generator

Add grain and noise textures to any element using SVG feTurbulence filters. Popular in modern UI design.

Noise Settings

Noise Type

Smooth, organic grain — great for paper/film textures

Base Frequency0.65

Higher = finer grain; lower = larger patterns

Octaves4

More octaves = more detail layers (more complex)

Opacity15%

Blend Mode

Invert noise (white grain)

Background Color

Live Preview

Textured UI

Grain overlay effect

Generated CSS

.noise-overlay {
  position: relative;
}

.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Usage: wrap your content in .noise-overlay */
/* The ::after pseudo-element creates the texture overlay */