CSS Noise & Grain Texture Examples
Eight ready-made noise textures, from whisper-fine film grain to coarse broadcast static, each one a tiny seamless SVG tile that ships inside your CSS as a data URI — a few hundred bytes doing the job designers used to solve with 200KB PNG overlays. Copy any texture as a complete background rule, download the tile itself as SVG, or open it in the noise generator to retune frequency and contrast.
Noise earns its place by fixing banding: laid at low opacity over a gradient, it breaks the smooth falloff that stripes on cheap displays. The fine-grain examples are tuned for exactly that overlay job, while the coarser, high-contrast ones are textures in their own right — headers, cards, empty states.
The duotone examples bake two colors into the tile, which reads richer than tinting a mono texture with CSS filters and costs nothing extra. Every tile here repeats seamlessly — check the preview edges — and the copied rule includes the background-size that keeps the repeat crisp at retina densities.