SVG background pattern generator
Generate a seamless SVG background pattern — dots, grid, stripes, waves, squares, hexagons or topography — as SVG, CSS or a Tailwind class.
SVG background pattern generator
Pick a motif — dots, grid, diagonal stripes, waves, squares, hexagons or topography — and this tool builds a seamless SVG pattern you can drop straight into a website background, an app screen or a printed design. The pattern is built from a single repeating tile, so the file stays tiny no matter how large the area it covers.
Tile size controls the spacing between repeats, and line thickness controls how bold the strokes are — it also sets the dot and square size for those two motifs. Foreground and background take any hex color (#RRGGBB or the shorter #RGB form), opacity fades the motif into its background without touching the background color itself, and rotation turns the whole tile — diagonal stripes already start at 45° and rotate further from there. Switch the output format to get exactly what you need: plain SVG markup to save as a file, a ready-to-paste CSS rule with the pattern embedded as a data URI, or a Tailwind arbitrary value class you can drop straight onto an element's class list.
Every option updates the preview instantly as you adjust it, and the tally under the output reports the tile's dimensions, the exact character count of the generated code and the active output format. Because the pattern is one small vector tile rather than a bitmap, it stays crisp at any zoom level and scales to any screen size for free.
Everything runs locally in your browser — nothing you design here is uploaded anywhere. When you're happy with the result, copy it, download it as a .txt file, or send the output back into the input to keep refining it.