🔲SVG Pattern Generator

Generate seamless SVG background patterns for websites and apps.

Colour

Opacity: 0.5

Size: 20px

background-color: #ffffff;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%3E%3Ccircle%20cx%3D'10'%20cy%3D'10'%20r%3D'2.5'%20fill%3D'%236366f1'%20fill-opacity%3D'0.5'%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;

About SVG Pattern Generator

Generate customisable seamless SVG background patterns — including dots, lines, grids, diagonals, crosshatch, waves, and hexagons. Control size, spacing, colour, opacity, and rotation, then copy the SVG code or CSS background-image property for immediate use in your design.

How to Use SVG Pattern Generator

1
Choose a pattern type
Select from the available seamless pattern styles in the pattern picker.
2
Customise appearance
Adjust colour, size, spacing, opacity, and rotation using the controls.
3
Copy and use
Copy the SVG code or CSS background-image value to use directly in your project.

Common Use Cases

Adding subtle background textures to landing pages and hero sections
Generating pattern fills for cards, banners, and UI elements
Creating decorative backgrounds for presentations and mockups
Building CSS background pattern utilities for a design system

Frequently Asked Questions

What pattern types are available?

Available patterns include dots, lines (horizontal/vertical/diagonal), grid, crosshatch, waves, chevrons, hexagons, triangles, and circles. Each can be fully customised for size, spacing, colour, and rotation.

How do I use the generated pattern in CSS?

Copy the CSS background-image output (a data URI SVG) and paste it into your stylesheet's background-image property. It tiles seamlessly and scales with the element.