How seamless patterns work
A seamless pattern is one small square, called a tile, repeated across and down. The tile is designed so its edges line up with the next one, so you can't see where one ends and the next begins. Scale here is the tile's size in pixels: small for a fine texture, large for a bold print.
Diagonal stripes and waves need a little care to join up. This tool draws the parts that cross the tile's edges on both sides, so lines run on without breaks.
Using the CSS on a website
The CSS sets a background colour and puts the tile in background-image as an SVG data URL. Paste it into any style rule. There's no image file to host, it's only a few hundred bytes, and it stays sharp on every screen because SVG is drawn as shapes, not pixels.
To change the scale later, change the tile's width and height, or add background-size, like background-size: 32px 32px. To fix the pattern while the page scrolls, add background-attachment: fixed.
Tips for patterns that don't distract
Patterns work well as a backdrop for link-in-bio pages, story backgrounds, slide decks and product photos, where a plain colour feels flat but a photo would compete.
- Keep the opacity low, around 10% to 30%, behind text.
- Use two colours close in lightness for a subtle texture.
- Bigger tiles with thin lines feel calmer than small, busy ones.
- Put text on a solid panel above the pattern when you need it to read easily.
PNG or SVG download?
Download the PNG for apps that don't take SVG, like Instagram, TikTok and most phone wallpapers. Pick 1080 × 1920 for stories, 1080 × 1080 for posts and 1920 × 1080 for desktops and slides. The SVG download is the same full-size background as shapes, which design apps like Figma and Canva can edit.
Frequently asked questions
How do I make a repeating pattern background in CSS?
Set background-image to a small image or SVG tile; it repeats by default. This tool writes the CSS with the SVG inlined as a data URL, so there's no file to upload.
Will an SVG background slow my site down?
No. A pattern tile is usually a few hundred bytes, far smaller than a photo, and it's inside the CSS so there's no extra request.
How do I make a polka dot background?
Choose Dots, set the dot size and the scale, which is the space between dots, and pick your colours. Copy the CSS or download a PNG.
Can I use the patterns for commercial work?
Yes. The patterns are simple shapes you make here, so you can use them anywhere, including products and client work.
Why does the pattern look blurry in my app?
Some apps shrink or compress images. Download the PNG at the exact size the app asks for, or use the SVG where it's supported.