SVG background pattern generator

Create a tiling dots, stripes, grid or cross-hatch background pattern and copy the CSS to use anywhere.

Color

Tile size: 24px

background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%20fill%3D'%232563eb'%2F%3E%3C%2Fsvg%3E");
background-size: 24px 24px;

Frequently asked questions

How do I use the generated pattern?

Copy the CSS and paste it into any element's style — it tiles automatically as a background-image.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Box Shadow Generator

Fine-tune offset, blur and color with live preview, then copy the CSS.

Use Box Shadow Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

Font Pairing Finder

Preview heading and body Google Font combinations side by side.

Use Font Pairing Finder

SVG background pattern generator

Create a tiling dots, stripes, grid or cross-hatch background pattern and copy the CSS to use anywhere.

Color

Tile size: 24px

background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%20fill%3D'%232563eb'%2F%3E%3C%2Fsvg%3E");
background-size: 24px 24px;

Frequently asked questions

How do I use the generated pattern?

Copy the CSS and paste it into any element's style — it tiles automatically as a background-image.

Related tools

See all 10 free css & design tools

CSS Gradient Generator

Design linear and radial gradients and copy ready-to-use CSS code.

Use CSS Gradient Generator

Box Shadow Generator

Fine-tune offset, blur and color with live preview, then copy the CSS.

Use Box Shadow Generator

Border Radius Previewer

Adjust each corner independently and copy the CSS border-radius.

Use Border Radius Previewer

Font Pairing Finder

Preview heading and body Google Font combinations side by side.

Use Font Pairing Finder