Pattern Generator - Seamless Repeating Tile Patterns

Seamless Pattern Generator

This seamless pattern generator builds repeating tile patterns from a library of 29 shapes, then lets you recolor and reshape them until they fit your design. Pick a pattern, adjust the colors and sliders, and watch a live tiled preview update with every change.

It is made for web developers who need a CSS background, graphic designers building seamless tiles for print or digital work, and anyone who just wants a quick, customizable repeating pattern. When you are happy with the result, export it as a PNG tile, an SVG, or ready-to-paste CSS.

Private by design: every pattern is drawn and exported in your browser with the Canvas API. Nothing is uploaded to a server, and no usage is tracked.

How to Use the Pattern Generator

Choose a pattern

Browse the pattern gallery and click any thumbnail to select it. The live preview updates immediately to show the tiled result.

Customize the colors

Set a Background and Pattern color with the pickers, or click any of the 10 preset palettes. Enable Color 2 to add a second color on patterns that support it, such as Confetti, Fan, and Herringbone.

Adjust the settings

Fine-tune the look with the sliders: Scale (10–100px), Rotation (0–360°), Spacing (0–40px), Opacity (5–100%), and Stroke width (1–8px) for outline-based patterns.

Export your pattern

Pick a tile size from 100×100 up to 800×800, then download a PNG or SVG tile, or copy CSS code with the pattern embedded as a data URI.

Features

29 Pattern Types

Geometric, organic, abstract, and decorative shapes — Dots, Grid, Chevron, Hexagon, Waves, Scales, Confetti, Herringbone, Flower, Spiral, and more.

10 Preset Palettes

One-click color schemes: Indigo, Ocean, Forest, Sunset, Rose, Purple, Mono, Dark, Teal, and Amber.

Custom Colors

Set your own background and pattern colors, with an optional second color for dual-tone patterns.

Fine Adjustments

Tune scale, rotation, spacing, opacity, and stroke width to reshape any pattern exactly the way you want.

Real-Time Preview

Every color and slider change is reflected instantly in the tiled preview — no waiting, no refresh.

PNG & SVG Export

Download a raster PNG or a scalable SVG tile, with a configurable tile size from 100px to 800px.

Copy CSS Code

Grab ready-to-paste CSS with the pattern embedded as a data URI — drop it straight into a stylesheet.

Randomize

One click generates a random pattern, palette, and settings — a fast way to discover unexpected combinations.

Dark Mode

A built-in dark theme keeps the interface comfortable in low light.

Responsive Layout

Works across desktop, tablet, and mobile so you can design patterns on any screen.

Frequently Asked Questions

What is a seamless pattern?

A seamless pattern is a tile that repeats perfectly in every direction with no visible seams or gaps. When the tile is laid side by side, the edges connect smoothly to form one continuous design — ideal for backgrounds and textures.

How do I make a repeating background pattern?

Click a pattern in the gallery, choose your colors and palette, then adjust the scale, rotation, spacing, and opacity sliders. The preview tiles your design in real time. When it looks right, export a PNG or SVG tile, or copy the CSS to use it as a repeating background.

Can I export the pattern as SVG and PNG?

Yes. PNG is a raster format with a fixed resolution based on the tile size you pick — great for web backgrounds. SVG is a vector format you can scale to any size, which suits print and large-format work. Both are downloaded as a single seamless tile.

How does the CSS export work?

The Copy CSS button generates a background-image rule with your pattern encoded as a data URI, plus the repeat and size properties. Paste it into your stylesheet to use the pattern as a repeating background without hosting a separate image file.

Can I change the colors, scale, and spacing?

Yes. Set a background and pattern color, add an optional second color, and pick from 10 preset palettes. The sliders control scale (10–100px), rotation (0–360°), spacing (0–40px), opacity (5–100%), and stroke width (1–8px) for outline-based patterns.

What does the Stroke slider do?

Stroke controls the line thickness for patterns built from outlines, such as Lines, Grid, Waves, Circles, Scales, and Arrows. On filled patterns like Dots, Diamond, and Hexagon, the stroke setting has no visible effect.

Are the patterns free for commercial use?

Yes. Patterns are generated entirely in your browser, so you own whatever you create and can use it for any purpose, including commercial projects.