SVG background pattern generator (dots, grids, lines)
Create seamless SVG background patterns, such as dot grids and lines, and export a data URI, a CSS class, Tailwind or a React component. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
Pick a pattern family and set its scale, stroke and gap. Rotate the pattern, fill it with a theme colour, and add a fade mask so it dissolves toward an edge instead of ending in a hard line.
The tile is seamless and stays a small SVG. Export it as a data URI, CSS custom properties, a Tailwind class, a raw SVG file or a TSX background component.
How to use it
- Choose a pattern family.
- Adjust scale, stroke, gap and rotation.
- Add a fade mask if the pattern should fade out.
- Copy the Tailwind class, the CSS or the SVG.
This generator is also a component of the kit: Generator Svg Pattern, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.