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.
Generate lightweight CSS backgrounds using repeatable SVG patterns.
Generate lightweight CSS backgrounds using repeatable SVG patterns
background-color: #ffffff;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iNSIgZmlsbD0iIzYzNjZmMSIgLz4KPC9zdmc+");
background-size: 20px 20px;
opacity: 0.2;Create infinite backgrounds with tiny file sizes. Generate polka dots, stripes, and squares using Base64-encoded SVG patterns directly in your CSS.
Found a bug or have a suggestion to improve the SVG Pattern Generator? Let us know and we'll fix it!