What Is the Noise Generator?
Create CSS noise textures and grain effects. Generate subtle noise overlays for backgrounds, cards, and hero sections. The texture is inlined in the CSS, so no separate image file is needed, or you can download it as one.
Why Use This Tool?
Noise textures add tactile depth to digital interfaces — a subtle grain makes flat backgrounds feel more organic. This tool makes the texture as a random-grain PNG tile or an SVG fractal-noise tile and inlines it in the CSS, so you paste one rule and you are done.
How to Use This Noise Generator
- Choose a noise type — Grain (PNG) gives random per-pixel static. Fractal (SVG) uses the SVG feTurbulence filter, a Perlin-style noise, with fractalNoise or turbulence variants.
- Adjust intensity and scale — Opacity sets how visible the noise is. Tile size sets how big the repeating tile is. In Fractal mode, frequency sets how fine or coarse the noise is and octaves add detail; grain is always one pixel per dot.
- Set the base color — Choose a background color to see how the noise texture layers on top of your design.
- Preview and export — View the noise pattern live, then copy the CSS or download the texture as PNG (both modes) or SVG (Fractal mode). The panel shows how many KB the inline texture adds; a grain PNG is far larger than the fractal SVG.
Tips and Best Practices
- → Use noise at low opacity. Subtle noise (5–15% opacity) adds organic texture without overwhelming the design. Higher opacity works for grunge or vintage aesthetics.
- → SVG noise is resolution-independent. Unlike PNG textures, SVG noise patterns scale to any screen density without pixelation — perfect for retina displays.
- → Layer noise over gradients. A faint grain over a smooth gradient breaks up visible banding steps and adds depth.
- → Use Fractal mode for tiny, tweakable noise. The
feTurbulence SVG filter draws the noise from a few numbers, so the tile is under 1 KB, and a new seed gives a different pattern.
See also: For animated dot-fields rather than static noise, the Particle Background Generator produces tsparticles-config JSON.
Frequently Asked Questions
How is CSS noise created?
Two ways here. Grain mode fills a square canvas with your noise color at a random transparency per pixel and exports it as a PNG. Fractal mode writes a small SVG whose feTurbulence filter produces Perlin-style noise, recolored to your noise color. Either tile is inlined in the CSS as a data URL and repeated over the element with ::after, opacity and a blend mode. The SVG renders sharp at any screen density; the PNG is one dot per CSS pixel.
Does noise affect performance?
SVG filter-based noise can impact paint performance on very large areas or low-end devices. Keep noise subtle (low opacity) and test on real hardware. For performance-critical areas, a small repeating PNG texture may be faster.
What opacity should I use for noise?
Start between 0.05 and 0.15 for a texture that is felt more than seen; the tool defaults to 0.15. With overlay or soft-light on a very dark background the grain shows less, so you may need more there. Higher values give a visible grain that suits vintage or editorial looks.
What is noise in web design?+
Noise is a subtle grainy texture applied over colors, gradients, or images to add organic depth and visual interest. It mimics the natural grain found in film photography and printed materials, preventing designs from looking too sterile or digitally flat.
How do I add noise with CSS?+
There are several approaches: use an SVG feTurbulence filter referenced in CSS, overlay a semi-transparent noise PNG as a background-image, or use a CSS gradient with many tiny color stops. The SVG filter approach is the most flexible and resolution-independent.
Does adding noise affect page performance?+
SVG filter noise is rendered by the browser and can impact paint performance on large areas — especially on mobile. For performance-critical pages, use a small tiling PNG texture instead. Keep noise layers on specific containers rather than the entire page.
What is CSS noise?+
CSS noise is a subtle grainy texture applied as a background to add visual depth and tactile quality. It prevents flat backgrounds from feeling sterile and adds a premium, printed feel to digital interfaces.
How do I add noise texture with CSS?+
Generate a small noise PNG or SVG and apply it as a repeating background-image layered over your background color. This tool creates the noise pattern and gives you the CSS to implement it.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service