SVG Pattern Generator is a free color & design tool that runs entirely in your browser — seamless tiling backgrounds as SVG or CSS. No upload, no account, no limits.
Build a seamless tiling background and take it away as SVG or as a one-line CSS rule. Pick a motif — dots, grid, diagonals, crosshatch, checks, crosses, zigzag or triangles — then set the tile size, stroke weight, angle, opacity and the two colours, with the result tiling live behind the controls as you go.
The output is a single tile, which is what makes it seamless: anything the motif draws across an edge is drawn again on the opposite edge, so the tile meets itself cleanly however far it repeats. Because it is vector, one small tile covers a 4K hero without a single extra byte, and the CSS version embeds the whole thing as a data URI so there is no second request.
Yes. Each motif is drawn so that anything crossing a tile edge is repeated on the opposite edge, which is what makes the joins invisible when the browser repeats it.
The CSS line embeds the tile as a data URI, so it needs no extra request and is ideal for something small. Save the .svg file instead when the pattern is reused across many stylesheets or you want to edit it later.
Yes — switch the ground off and only the motif is drawn, so whatever sits behind the element shows through.
Every calculation happens on this page, in your own browser. Your input is never sent to a server, never logged and never used for training — which also means the tool keeps working when you are offline.