Seamless Pattern Generator

Design a repeating background pattern in seconds: pick dots, stripes, waves, grid, zigzag, checks and more, choose your colors, scale and line thickness, and copy ready-to-use CSS or download a seamless SVG tile or a PNG at any size.

How to use the Seamless Pattern Generator

1. Pick a pattern from the style grid: dots, stripes, waves, grid, zigzag, checks and more.
2. Choose colors for the pattern and the background, or tick Transparent to keep only the shapes.
3. Adjust Scale and Thickness until the preview looks right. For stripes, choose the direction.
4. Copy the CSS to use the pattern as a website background, or switch to SVG to copy the tile code.
5. Download the SVG tile, a full-size SVG or a PNG in the size you need for wallpapers, slides or print.

Using the CSS pattern

The CSS output embeds the tile as an SVG data URI, so the whole pattern is a few hundred characters of text. Paste it into any selector:

body {
  background-color: #eef5f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");
  background-size: 32px 32px;
}

• Layer it over a gradient: tick Transparent background, then list the pattern first and the gradient second, for example background-image: url("data:..."), linear-gradient(#fff, #e9f3ec);
• Make it subtle: choose a pattern color only slightly darker than the background, or put the pattern on a pseudo-element with opacity: .15.
• Keep text readable: on busy patterns, place text on a solid card or add a semi-transparent overlay.
• Change the size later: edit only background-size; the SVG scales without blurring.

Pattern styles and good uses

SVG or PNG?

An SVG tile is usually under 400 bytes and stays perfectly sharp at any zoom level, so it is the best choice for websites. Export a PNG when you need a fixed-size raster image, for example a desktop or phone wallpaper, a presentation background, a social media graphic or a file for printing. For print, choose a size of at least 300 pixels per inch of the final print (about 3000 px for a 10 inch wide print).

Frequently asked questions

Related tools