Tools Blog

Noise Texture Generator

Generate SVG-based noise and grain textures as CSS background patterns. Tileable, pure CSS, no images required.

3 texture typesSVG-basedTileable

① Choose texture type and frequency ② Adjust octaves and opacity ③ Copy the CSS

#1A1714
.noise-bg {
  background-color: #1a1714;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'noise'%3E%3CfeTurbulence%20type%3D'turbulence'%20baseFrequency%3D'0.65'%20numOctaves%3D'4'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'200'%20height%3D'200'%20filter%3D'url(%23noise)'%20opacity%3D'0.30'%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

What are SVG noise textures and how to use them in CSS?

SVG noise textures are procedurally generated patterns created using the feTurbulence SVG filter. They can be inlined as a data: URI directly in CSS without any image files. The baseFrequency attribute controls the granularity: low values (0.50–0.65) produce smooth noise, high values (0.80–0.90) create fine grain. numOctaves adds detail layers — more octaves means more complex, natural-looking texture. The turbulence type creates cloud-like noise, while fractalNoise generates smoother, more organic grain patterns used in film photography simulation. The texture is applied as a background-image with background-repeat: repeat over a solid color, enabling endless tiling without visible seams. Noise textures add visual warmth and depth to flat design elements like hero sections, cards and buttons.

Frequently Asked Questions

feTurbulence is an SVG filter primitive that generates procedural noise using the Perlin noise algorithm. It produces pseudo-random patterns with two types: turbulence (cloud-like) and fractalNoise (smoother, more organic). The output is used as a texture overlay in CSS.
baseFrequency controls the scale of the noise pattern. Low values (0.50–0.65) produce coarse, smooth noise suitable for subtle backgrounds. High values (0.80–0.90) create fine grain, similar to film grain or paper texture. Values above 0.90 may produce Moire-like artifacts.
Noise uses the turbulence type with standard frequency — cloud-like, smooth texture. Grain uses fractalNoise type — smoother and more organic, similar to photographic film grain. Gravel uses turbulence at higher frequency (1.5x) — coarser, gritty texture resembling sand or asphalt.
Each octave adds a layer of detail at a higher frequency and lower amplitude. 1 octave = simple, smooth noise. 3–4 octaves = natural, complex texture. 5 octaves = highly detailed grain. More octaves increase rendering cost in browsers.
Yes. The stitchTiles="stitch" attribute in the SVG filter tells the browser to seamlessly tile the noise pattern. Combined with background-repeat: repeat and background-size: 200px 200px, the texture tiles without visible seams.
SVG data URIs are processed by the GPU as filter operations, so they are generally lightweight. However, animated noise (changing baseFrequency) is expensive. For best performance, use noise as a static background-image, not as a CSS animation.
Apply the noise as a second background-image layer over a gradient: background-image: url("data:..."), linear-gradient(...). CSS background layers stack, with the first item on top. Use opacity on the noise layer by setting the SVG opacity attribute.
Related Articles
Design 9 min read
How to Build a Consistent Brand Color Palette from Scratch
A step-by-step guide to choosing your primary brand color, generating harmonies, checking WCAG contrast, and exporting CSS variables — using free PixCode tools at every step.

Explore Our Network

ntool.io Free network diagnostics toolkit — ping, traceroute, DNS lookup, port scanner, and more Visit → capops.io Free financial calculators — compound interest, mortgage, retirement planning, investment tools and more Visit →