Create seamless, lightweight SVG background patterns for your websites.
Dots, Grid, Lines, Checks, Cross, Zigzag, Waves, Triangles, Hexagons, Circles
Foreground & Background colors, Opacity, Scale controls
Toggle-able soft Gaussian blur for neon-style patterns
Scroll and Pulse effects with auto-generated CSS keyframes
One-click copy of ready-to-use CSS code
Export as standalone .svg file for any use
See real-time changes as you customize
Pure SVG - No images, tiny file size, perfect quality
This is how your pattern looks as a background.
background-color: #ffffff;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%200%2020%2020'%3E%3Crect%20width%3D'20'%20height%3D'20'%20fill%3D'%23ffffff'%20fill-opacity%3D'0'%2F%3E%3C!--%20Pattern%20Content%20--%3E%3Cg%20transform%3D%22rotate(0%2010%2010)%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20fill%3D%22%233b82f6%22%20fill-opacity%3D%221%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");