SVG Pattern Generator

Generate CSS SVG background patterns: dots, stripes, grid, cross-hatch. Copy ready-to-use CSS.

Pattern Type: DotsTile Size: 20pxStroke Width: 1pxColors (FG/BG): #94a3b8/#f8fafc

Presets:

Pattern Type

Foreground Color

#94a3b8

Background Color

#f8fafc

Size: 20px

Stroke Width: 1px

Live Preview

CSS Code

background-color: #f8fafc;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%3E%3Crect%20width%3D'20'%20height%3D'20'%20fill%3D'%23f8fafc'%2F%3E%3Ccircle%20cx%3D'10'%20cy%3D'10'%20r%3D'3.3333333333333335'%20fill%3D'%2394a3b8'%2F%3E%3C%2Fsvg%3E");
background-size: 20px 20px;

SVG Pattern Generator

Generate repeating SVG background patterns for use in CSS. Choose from dots, horizontal, vertical, or diagonal stripes, a grid, or a cross-hatch pattern. Adjust the tile size and stroke width with sliders and pick foreground and background colors. The generated CSS uses an inline data URI so no external image files are needed.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a repeating background pattern without an image file.
Getting a subtle dot or grid texture as inline CSS.
Building a pattern that inherits colours from variables.
Comparing pattern densities against a live preview.
Replacing a raster texture with something that scales.

Frequently Asked Questions

Why an SVG data URI rather than an image file?: Because it costs no extra network request and stays sharp at every zoom level. The whole pattern is a few hundred characters of markup embedded in the stylesheet, so it arrives with the CSS instead of being a second round trip for something the size of a favicon.
How does the tile repeat?: By ordinary `background-repeat`, the same as any raster background. The generated SVG describes one tile and the browser tiles it — which is why the tile size control changes the pattern's density rather than its scale, and why edge-crossing shapes have to be drawn twice to line up.
Why does my data URI break in some stylesheets?: Almost always unescaped characters. A raw `#` in a hex colour terminates the URI as a fragment, and `<`, `>` and quotes need encoding too. The generated output escapes them, which is the difference between a pattern that works and a `background-image` the browser silently drops.
How do I recolour the pattern in a dark theme?: Regenerate it — colours are baked into the data URI and CSS cannot reach inside. If it has to be themeable, use an inline `<svg>` element with `fill: currentColor`, or set the pattern with a custom property whose value is a whole different URI per theme.
Should the pattern go behind text?: Only at very low contrast. A stripe or grid behind body copy competes with the letterforms and measurably slows reading — the safe use is a large empty area, a section divider or a card back. If it must sit under text, put a semi-opaque layer between the two.

Common errors and gotchas

Choosing Base64 encoding for the SVG when percent-encoding is smaller and stays readable.
Forgetting to encode the `#` in a hex colour inside a data URI, which truncates it.
Using a pattern busy enough to hurt the legibility of text over it.
Omitting the xmlns attribute, without which the SVG will not render standalone.
Assuming the pattern tiles seamlessly at every size, which depends on the repeat unit.