Background Pattern Generator
Create seamless background patterns: dots, grid, stripes, checker, zigzag, waves, triangles, plus, hexagons, circles, diamonds and bricks. CSS, SVG or PNG.
Loading Pattern Generator…
Your files never leave your device
About this tool
Subtle patterns add texture to website sections, slides, mockups and social graphics without the weight of a photo. This pattern generator creates seamless, repeating backgrounds from twelve classic motifs. Adjust size, thickness, opacity and colors, preview the tile repeating live, and copy a CSS background or download the pattern as an image.
Available patterns
Dots, grid, stripes, checker, zigzag, waves, triangles, plus signs, hexagons, circles, diamonds and bricks.
How to create a pattern
- Pick a pattern style, or click Random for a surprise.
- Set the size, line thickness and opacity.
- Choose the foreground and background colors.
- Copy the CSS background for your stylesheet, or download an SVG or PNG tile.
Using patterns well
- Keep contrast low behind text: a pattern a few shades away from the background adds texture without hurting readability.
- Use SVG or CSS on websites: both are tiny and stay sharp on any screen.
- Scale for the medium: bigger, bolder patterns for posters and slides, finer ones for web sections.
- Combine with a gradient overlay to fade a pattern out toward the edges.
Ideas
- Hero and footer section backgrounds.
- Blog header images and YouTube thumbnails.
- Presentation slides and event badges.
- Wrapping paper, stickers and printed backgrounds (download a large PNG or SVG).
Frequently asked questions
Are the patterns seamless?
Yes. Each pattern is a tile designed to repeat without visible seams in every direction.
How do I use a pattern on my website?
Copy the CSS background and paste it into the style of any element, or download the SVG and use it as a background-image.
Which pattern styles are included?
Dots, grid, stripes, checker, zigzag, waves, triangles, plus, hexagons, circles, diamonds and bricks.
Can I download the pattern as an image?
Yes, as an SVG for sharp scaling or a PNG for apps that do not accept SVG.
Can I use the patterns commercially?
Yes. The patterns you generate are free to use in personal and commercial work.
Will a pattern slow down my site?
No. CSS and SVG patterns are only a few hundred bytes, much lighter than a photo background.