▦▧

SVG Pattern Generator

Seamless background patterns (dots, grid, stripes, zigzag …) as CSS.

Pattern color

Pattern

Background color

Tile size (px)

Line / dot size

180 B

Size

Result

background-color: #f8fafc;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Crect width=%2224%22 height=%2224%22 fill=%22%23f8fafc%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22 fill=%22%23cbd5e1%22/%3E%3C/svg%3E");
background-size: 24px 24px;

Runs entirely in your browser. Nothing is sent anywhere.

How it works

1Paste or type your text.
2Choose the options you need.
3Copy or download the result.

About this tool

SVG Pattern Generator: Seamless background patterns (dots, grid, stripes, zigzag …) as CSS. Paste your text and the result appears immediately, ready to copy or download. Everything happens locally in your browser — nothing you paste is uploaded or stored.

How do I use the SVG Pattern Generator?

Paste or type your text. Choose the options you need. Copy or download the result.

Is the SVG Pattern Generator free?

Yes. It is completely free with no sign-up, no usage limits and no watermark.

Is my data sent to a server?

No. Everything is calculated locally in your browser. Nothing you enter is uploaded, logged or stored.

Does it work on my phone?

Yes. It works in any modern browser on Android, iPhone, iPad, Windows, Mac and Linux — no app needed.

SVG Pattern Generator

How it works

About this tool

Related tools