Background pattern generator
Polka dots, diagonal stripes, grid, zigzag or waves: pick two colors and the density, watch the tiled preview and download a seamless PNG tile ready to repeat.
The downloaded tile repeats seamlessly with no visible joints.
What makes a pattern truly seamless
A seamless tile is an image whose edges line up perfectly: whatever exits on the right comes back in identical on the left, and the same holds vertically. This generator draws every motif with that continuity in mind, the diagonal stripes, for instance, are spaced at exact fractions of the tile, so you can repeat the PNG forever without seams or visible steps.
How to use the downloaded PNG
On a website, one line of CSS is all it takes: background-image: url(pattern.png);
background-repeat: repeat;. The same tile works as a fill in Canva, PowerPoint, Photoshop
or GIMP (via "Define Pattern"), as a background for YouTube thumbnails and social posts, or as a
subtle texture for letterheads and greeting cards. The higher the density, the smaller and
tighter the weave.
Why a pattern weighs less than a photo
A repeatable background can take a few kilobytes and cover a whole screen, because the browser draws the same tile a hundred times. A photograph covering the same area weighs a hundred to a thousand times more, and has to download before the page looks finished.
The other advantage is that a pattern fits any size: it has no resolution to respect, it does not go blocky on a large screen and it leaves no empty edges on a narrow one. It is why repeating backgrounds have survived twenty years of fashions.
A pattern should not draw attention
A background competing with the content is the wrong background: the contrast between the motif and the paper must be kept very low, often a difference of a few points of lightness. On screen it looks almost invisible, and that is exactly the sign that it is right.
The concrete risk is text becoming tiring: under a line of text any motif with small details creates noise that slows reading down. If the pattern has to sit behind text, it must either be lightened a lot or covered by a solid panel.
Small tiles and large tiles
A small tile repeats many times and the repetition shows: the eye finds the grid immediately, especially if the motif has a recognisable element. A large tile hides the repetition better but weighs more and needs careful work at the edges.
The motifs that hold up best are geometric and regular (stripes, dots, grids, diagonals), where repetition is part of the design and not a flaw. A figurative motif, by contrast, gives the tile away at first glance, because the brain recognises the same shape in the same position.
Nearby tools
For a gradient background instead of a repeating one there is CSS gradient generator. Colours are picked with Colour picker, and the readability of text on top is checked with Colour contrast checker.