SVG Pattern Generator

Generate lightweight CSS backgrounds using repeatable SVG patterns.

Back to Design & UI

SVG Pattern Generator

Generate lightweight CSS backgrounds using repeatable SVG patterns

Select Pattern

Size: 20px

Stroke: 1px

Background

Shape Color

Pattern Opacity: 20%

Pattern Preview

background-color: #ffffff;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iNSIgZmlsbD0iIzYzNjZmMSIgLz4KPC9zdmc+");
background-size: 20px 20px;
opacity: 0.2;

About SVG Pattern Generator

Create infinite backgrounds with tiny file sizes. Generate polka dots, stripes, and squares using Base64-encoded SVG patterns directly in your CSS.

Something not working right?

Found a bug or have a suggestion to improve the SVG Pattern Generator? Let us know and we'll fix it!