Pattern generator
Make a seamless repeating dot, diagonal-line or square background with reusable CSS and a tile image. Files and entered content are not sent to or stored on a server.
How to use
Make a seamless repeating dot, diagonal-line or square background with reusable CSS and a tile image.
Supported formats & limits
Values / Images → SVG / PNG
Processing stays in this browser. File formats and available memory may limit the result.
The exported image is one repeating tile. Its size matches the repeat spacing, 4–200 px.
Pattern generator User guide
Instructions
- Choose pattern and background colors.
- Set repeat spacing and dot radius / line width / square size.
- Check the repeated preview, copy CSS or save the tile SVG / PNG.
Example
Input / settings
Dots · spacing 32 px · radius 2 px
Result / checks
32 × 32 repeating tile
Please note
- The exported image is one repeating tile. Its size matches the repeat spacing, 4–200 px.
- Shape size must be positive and at most half the tile size. CSS repeats the tile automatically.