SVG Pattern Generator
Create dots, grids, lines, and geometric shapes you can recolor and download.
px
px
Your result
Choose a pattern to see it.
CSS for any background
The SVG tile
How to use it
- Choose a pattern.
- Pick the colours, the tile size, and the thickness.
- Copy the CSS, copy the SVG, or download the tile.
Examples
- DotsDots, 16 px tile, size 2 A circle in the middle of each tile
- GridGrid, 16 px, thickness 2 Lines placed inside the tile, so they are not cut in half
Tool details and privacy
Make a repeating dot, grid, line, diagonal, or cross pattern, see it fill an area, and copy it as CSS or SVG.
A small SVG tile repeats sharply at any size and weighs almost nothing.
Options
- Tile 4 to 48 px. Thickness 1 to 8, at most half the tile. The background can be transparent.
Limits
- One pattern colour and one background.
- The CSS uses a data URL, which some strict sites block.
Privacy
What you type stays in your browser. Nothing is uploaded or saved on the server.
Questions
Can the background be transparent?
Yes.
How do I use it?
Paste the CSS on any element, or use the SVG file.
Is the artwork copied from somewhere?
No. It is drawn from your settings.
Is anything uploaded?
No.