SVG & CSS Pattern Generator
Generate repeating SVG/CSS background patterns for your designs. Choose from stripes, dots, grids, checkerboards, herringbone, and hexagons — then customize colors, size, and rotation.
Pattern
Primary Color
Background Color
Size / Scale — 40px
Rotation — 45°
CSS Output
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22%230f1115%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%2220%22%20x2%3D%2240%22%20y2%3D%2220%22%20stroke%3D%22%232f6bff%22%20stroke-width%3D%2220%22%20transform%3D%22rotate(45%2020%2020)%22%2F%3E%3C%2Fsvg%3E");
background-size: 40px 40px;How to sVG & CSS Pattern Generator
- Select a pattern type from the dropdown.
- Choose your primary and background colors.
- Adjust the size and rotation sliders.
- Copy the CSS, copy the SVG markup, or download the SVG tile.
How to use SVG patterns in CSS
Private by design — patterns are generated entirely in your browser. No data is uploaded.
Related tools
Frequently asked questions
How do I use the CSS output?
Paste the CSS output into any element style or class. The background-image is a data URI so no external file is needed.
Can I use the SVG tile in Figma or Sketch?
Yes — download the SVG tile and import it into Figma, Sketch, or any vector editor. You can then use it as a fill pattern.
Does rotation work for all patterns?
Rotation is applied to all patterns. Some like checkerboards look best at 0° or 45°, while stripes shine at any angle.