🔳SVG Pattern Generator

About this tool

Pick one of 12 patterns, choose the pattern and background colours or a transparent background, and set the tile size, stroke or dot size and rotation. The preview fills a large area so you can judge the repeat. Copy the CSS, which embeds the SVG as a data URI, copy the raw SVG, or download it as a file.

Why SVG patterns make good backgrounds

A repeating background pattern is built from one small tile that the browser repeats in both directions. Drawing that tile as SVG has several advantages over a PNG or JPG. It's vector, so it stays sharp on high-resolution screens and at any zoom level. It's tiny, usually a few hundred bytes, and embedding it in the CSS as a data URI means no extra download at all. And because it's code, changing a colour or size is instant. The CSS uses URL encoding rather than Base64 for the embedded SVG, which is shorter and easier to read. Patterns whose shapes meet at the edges of the tile, such as grids, checks, waves and dots, repeat seamlessly. Subtle patterns at low contrast make good textures behind content; bold ones suit banners, cards and placeholder images. Use the transparent option to layer a pattern over a gradient or photo with multiple backgrounds. Honest limits: rotating the tile rotates the shapes inside it rather than the whole grid, so some angles show seams, and very fine, high-contrast patterns can shimmer or produce moiré effects on some screens. Keep any text on top readable. The SVG wave generator, the blob generator and the gradient generator make other backgrounds.

Frequently asked questions