The Pattern Generator creates seamless, repeating background patterns you can use anywhere on the web. Choose a style — dots, grid, diagonal lines, crosses, vertical lines, or zigzag — set the size and colours, and copy it as ready-to-use CSS or an SVG.
The patterns tile perfectly and are built from tiny SVGs, so they stay crisp at any scale and add almost nothing to your page weight. Everything is generated in your browser.
How to generate a pattern
- Pick a pattern style.
- Set the tile size with the slider.
- Choose the background and pattern colours.
- Copy the CSS (a background with a data-URI), copy the SVG, or download a PNG.
Using the CSS output
The “Copy CSS” button gives you a background-color and a background-image that embeds the pattern as a data URI. Paste it onto any element and the pattern tiles automatically — no image file to host and no extra network request.
Because it’s an SVG, the pattern looks sharp on every screen, including high-DPI displays, and you can recolour it any time by regenerating.
Where patterns work well
- Subtle page or section backgrounds.
- Hero areas, cards, and dividers.
- Empty states and placeholders.
- Anywhere a flat colour feels too plain.
Frequently Asked Questions
Are the patterns seamless?
Yes. Each pattern is built from a single tile that repeats perfectly in every direction, so there are no visible seams.
How do I add the pattern to my site?
Use “Copy CSS” and paste the background-color and background-image onto any element. The pattern is embedded as a data URI, so nothing else is needed.
Can I change the colours and size?
Yes. Set the background and pattern colours and the tile size, and the preview and outputs update instantly.
Does it add much page weight?
Almost none. The patterns are tiny SVGs embedded inline, so there’s no separate image request and no measurable performance cost.