Pattern Generator
Design seamless background patterns in seconds. Copy the CSS, download a repeating tile, or export a full-size wallpaper in any resolution.
How to use Pattern Generator
- 1
Choose a pattern
Pick from 12 seamless patterns, from polka dots and stripes to hexagons, organic blobs and topographic contour lines.
- 2
Customise it
Adjust scale, shape size, line thickness and rotation, choose a palette or your own colours, and shuffle for new variations.
- 3
Use it anywhere
Copy the CSS background code, download a seamless SVG or PNG tile, or export a full-size image for wallpapers, slides and print.
Seamless patterns for websites, design and print
A seamless pattern is a small tile that repeats in every direction without visible edges. Patterns add texture and personality to website sections, app backgrounds, presentations, packaging, social media graphics and printed materials. This generator creates them as clean vector SVG, so they stay razor-sharp at any size and weigh only a few hundred bytes.
12 pattern styles
- Geometric: polka dots, grid, diagonal stripes, checkerboard, triangles, hexagons (honeycomb), overlapping circles and plus signs.
- Lines: waves and zigzag (chevron) patterns.
- Organic: soft random blobs and topographic contour lines, which you can shuffle for endless unique variations.
Full control over the look
Change the tile size, the size or density of the shapes, the line thickness and the rotation. Use one of the curated palettes or choose your own background, shape and accent colours, adjust the opacity for subtle textures, or use a transparent background to place the pattern over photos and gradients.
CSS background code
The CSS tab gives you a ready-to-paste rule with the pattern embedded as an SVG data URI and the correct background-size, so it repeats perfectly. No image files to host, no extra HTTP requests. Tailwind CSS classes and the raw SVG tile are available too.
Tiles and full-size images
Download a single seamless tile as SVG or PNG (at 1×, 2× or 4× for retina screens) to use in Figma, Photoshop, Canva or your own code. Or export a full-size image for desktop and phone wallpapers, social media banners or an A4 print at 300 dpi.
Tips for great patterns
- For subtle website backgrounds, use low opacity and colours close to the background.
- Large scale with thin lines looks elegant; small scale with bold shapes looks playful.
- Rotation works well with stripes, grids and plus signs for a dynamic look.