All Tools
Search tools...
⌘K
English
Home
Generators
Pattern Generator
Pattern Generator
Generate SVG patterns for backgrounds
Browser Processing
Your data never leaves your browser
Pattern Type
Dots
Size (px)
Primary Color
Secondary Color
Stroke Width
Opacity
Randomize
Preview
Copy SVG
Copy CSS
SVG Code
Copy
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"> <rect width="100%" height="100%" fill="#ffffff"/> <circle cx="10" cy="10" r="2" fill="#6366f1" opacity="1"/> </svg>
CSS Background
Copy
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20fill%3D%22%236366f1%22%20opacity%3D%221%22%2F%3E%0A%3C%2Fsvg%3E");
Pattern Presets
Related Tools
QR Code Generator
Generate QR codes for URLs, text, and more
Barcode Generator
Generate barcodes (EAN, UPC, Code128)
Fake Data Generator
Generate fake data for testing
Random Name Generator
Generate random names for testing