Pattern Generator

Generate CSS for background patterns and noise.

Noise & Pattern Background Generator

Create subtle noise and pattern backgrounds for your designs.

Pattern Type

Pattern Color

Background Color

Scale / Size (20px)

Pattern Opacity (0.10)

background-color: #f0f0f0;
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%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cfilter%20id%3D'n'%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.85'%20numOctaves%3D'3'%20stitchTiles%3D'stitch'%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ffilter%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.1'%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");

Frequently Asked Questions

Pattern Generator

How do I use this tool?

What is this tool for?

How does the 'Noise' pattern work?

Can I use these backgrounds on any element?