How to make a seamless pattern
- Choose a pattern: dots, grid, stripes, checker, zigzag, waves, triangles, plus signs, rings or diamonds.
- Adjust the tile size, line or dot size, rotation and opacity, and pick the shape and background colours (or a transparent background).
- Copy the CSS to use the pattern as a website background, download the tiny SVG tile for design tools, or export a 1920 × 1080 PNG wallpaper.
Lightweight backgrounds with SVG
Each pattern is a single small SVG tile that repeats seamlessly. Embedded in CSS as a data URI, it adds texture to a page section, card or hero area with no extra image request and stays sharp on high-resolution screens. Subtle patterns with low opacity and colours close to the background work best behind text; bold, high-contrast patterns suit posters, packaging mock-ups, gift wrap and social graphics.
The CSS uses background-image with the encoded SVG and background-size set to the tile size. Rotated patterns are applied to an oversized layer so the edges stay covered; the PNG export bakes the rotation in. Settings are saved in the page link so you can share or bookmark a pattern. Everything is generated in your browser.
How do I use the CSS?
Paste it into the rule for the element you want to decorate, such as body or a section.
Are the patterns seamless?
Yes. Each tile is designed so its edges line up when repeated.
Can I use them commercially?
Yes, patterns you create are free to use.