How to make a repeating background
- Pick one of the nine patterns, then set the scale, line width, and rotation. Try a color scheme or choose your own two colors.
- Under Get the pattern, choose CSS background to copy code you can paste into any stylesheet.
- Choose SVG tile or PNG to download a file at the width and height you need, such as 1920 by 1080 for a wallpaper.
Dark text stays readable on a pale pattern, so keep the two colors close in brightness for subtle backgrounds. Use a thicker line and higher contrast for bold, decorative sections.
Questions
Is anything uploaded?
No. The pattern is built as SVG text in your browser, and the CSS, SVG, and PNG are made on your device. Nothing is sent anywhere.
Why use an SVG pattern instead of an image file?
An SVG tile is a few hundred bytes, stays sharp on high-density screens, and can be inlined in CSS as a data URL, so it needs no extra request. A PNG of the same pattern is much larger and blurs when scaled.
How does the CSS background work?
The CSS sets a background color and repeats a small SVG tile as the background image. With rotation set to 0 the tile repeats with no seams. With a rotation, the tool saves one stretched image so the angle is kept.
Will the PNG or SVG repeat without visible seams?
The tiles are drawn so their edges meet exactly, including the hexagon and wave patterns. The full-size SVG and PNG are generated at the width and height you choose, so they do not need to repeat.
Can I use the patterns commercially?
Yes. The shapes are simple geometry generated on the fly, and the output is yours to use in websites, apps, and print.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.