ZeroServer.tools

SVG Pattern Generator

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

Pattern Type

Foreground Color

#94a3b8

Background Color

#f8fafc

Size20px

Stroke Width1px

Live Preview

CSS

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.

Private & free — this tool runs entirely in your browser.