Image Tools

SVG Pattern Generator

Create repeating SVG background patterns. Choose from dots, lines, grid, zigzag, triangles, or hexagons. Adjust size, spacing, and colors, then copy the CSS or download the SVG.

Pattern type
CSS (where supported)
background-color: #ffffff;
background-image: radial-gradient(circle, #6366f1 3px, transparent 3px);
background-size: 20px 20px;

How it works

Patterns are generated as SVG using the SVG patternUnits system. A single tile is defined and repeated automatically across the entire element. Rotation is applied via patternTransform. For simple patterns, equivalent CSS code using gradients is also output.

Frequently asked questions

How do I use the pattern as a CSS background?

For simple patterns (dots, lines, grid) the tool outputs a CSS background-image value you can paste directly into your stylesheet. For complex patterns use the SVG download and reference it as a background-image URL.

Can I use these patterns commercially?

Yes. The patterns are generated by this tool — you own the output and can use it in any project, commercial or personal.

What is the difference between the SVG and CSS output?

The SVG is a standalone file you can embed or reference as an image. The CSS uses built-in browser gradient functions and works for dots, lines, and grid patterns without any file.

What does the Rotation slider do?

It applies a patternTransform rotate() to the SVG pattern, spinning the entire repeating unit by the specified degrees.

Related tools