Create beautiful procedural SVG noise textures for your designs.
background-color: #0f172a;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D'100%25'%20height%3D'100%25'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%0A%20%20%3Cfilter%20id%3D'noise'%3E%0A%20%20%20%20%3CfeTurbulence%20%0A%20%20%20%20%20%20type%3D'fractalNoise'%20%0A%20%20%20%20%20%20baseFrequency%3D'0.65'%20%0A%20%20%20%20%20%20numOctaves%3D'3'%20%0A%20%20%20%20%20%20stitchTiles%3D'stitch'%0A%20%20%20%20%2F%3E%0A%20%20%3C%2Ffilter%3E%0A%20%20%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'%230f172a'%20%2F%3E%0A%20%20%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23noise)'%20opacity%3D'0.15'%20%2F%3E%0A%3C%2Fsvg%3E");SVG Noise is a procedural texture generated using the SVG `feTurbulence` filter. Unlike raster images (like PNG or JPG) that add megabytes to your website, SVG noise is generated mathematically by the browser. It allows you to create rich, tactile, and gritty textures that scale infinitely without losing quality. This style is heavily used in modern web designs (like Apple's landing pages and Bento grids) to give digital interfaces a premium, physical feel.
Controls the density of the noise. Lower values create large, soft clouds, while higher values create fine, sharp sand-like grains.
Determines the complexity and detail of the noise. More octaves add layers of detail, making the texture look more organic and less synthetic.
By encoding the SVG into a data URI, you can use it directly in your CSS as a `background-image` over solid colors or gradients.
Performance is critical for modern websites. Using a high-resolution PNG for a grain texture can add 500KB or more to your page size. SVG noise takes up less than 1KB of code! Since it is rendered on the fly by the browser's GPU, it keeps your site lightning fast while maintaining perfect sharpness on 4K and Retina displays.
Copy the generated CSS code from the output box. It uses a base64 encoded SVG as a `background-image`. You can apply it to any element. For best results, use it over a solid background color or gradient.
SVG filters are rendered by the GPU. While they are extremely lightweight in terms of file size (less than 1KB), applying very high octaves on massive full-screen elements might cause slight scrolling lag on very old mobile devices. Stick to 2-3 octaves for best performance.
Yes! Since it's an SVG, you can download the file and scale it to any size in Adobe Illustrator or Photoshop without losing quality. It's perfect for print posters and packaging.
The noise itself is monochromatic (grayscale). You can change the background color it sits on using the 'Base Color' picker to get different aesthetic results.
Try our other high-performance visual and asset color design systems.