What is a noise texture in CSS?

A noise texture is a random, grain-like visual pattern applied as an overlay on web elements. It adds organic character to flat digital surfaces, prevents gradient banding, and creates a premium, tactile feel.

How do I add noise to a CSS gradient?

Apply an SVG feTurbulence filter as a pseudo-element overlay on top of the gradient, or use a small tiled PNG noise image. Keep the opacity between 3–6% for a subtle effect.

Does CSS noise affect performance?

SVG feTurbulence filters can be GPU-intensive, especially on mobile. For better performance, use a pre-rendered PNG noise image tiled with background-repeat instead of a live SVG filter.

What is feTurbulence?

feTurbulence is an SVG filter primitive that generates random noise patterns. The type can be 'fractalNoise' (smooth, cloud-like) or 'turbulence' (more chaotic). baseFrequency controls grain size, and numOctaves controls detail complexity.

CSS Noise Textures & Backgrounds

🌫️

Try Noise Generator

Free, no signup →