Patterns
Saved palettes
What is an SVG background pattern?
An SVG background pattern is a tiny vector tile — a few hundred bytes of circles, lines, or curves — that the browser repeats infinitely as a CSS background. Because it's vector, it stays razor sharp on every screen density, and because it ships as a data-URI inside your stylesheet, it costs zero network requests. This svg pattern generator builds that tile live: pick one of eight families, tune its scale, weight, and colors, and the preview repeats it exactly the way your page will.
How to build your pattern
- Pick a family in the Family drawer — dots, grid, lines, crosses, chevrons, triangles, waves, or topography.
- Drag Scale to set the repeat size and Weight to thicken or thin the shapes.
- Set the pattern color, and choose a background color or flip it to Transparent to layer the pattern over your own surface.
- On Topography, press Shuffle terrain to reroll the contour lines until the landscape looks right.
- Copy CSS for the paste-ready rule, Copy Tailwind for utilities, or download the SVG tile or a full-size tiled PNG.
Why seamless matters (and how these tiles guarantee it)
A repeating background lives or dies on its seams: one misaligned pixel at a tile edge turns into a visible grid of scars across the whole page. Every family here is seamless by construction, not by eyeballing — shapes either stay safely inside the tile, or cross its edges with geometry the neighboring repeat continues exactly, and the wavy families begin and end every line at the same height and angle so rows flow across tiles without a kink. That's also why the css pattern background this tool copies works at any size: scale the tile up or down and the math holds.
Where to use each pattern family
Dot grids and fine lines read as calm, technical texture — hero sections, dashboards, documentation headers. A blueprint-style grid pattern suits developer tools and engineering landing pages; chevrons and triangles bring energy to event and product pages; the soft wave rows work behind testimonials and pricing cards. Topographic contours — the trending "map lines" look — give outdoor, travel, and portfolio sites an organic feel that flat color can't. All eight stay legible over either a solid background color or, with Transparent on, whatever gradient or photo already lives behind them.
Frequently asked questions
Is this SVG pattern generator free for commercial use?
Yes — every pattern you build here is free for personal and commercial projects, with no signup and no watermark. The copied CSS and downloaded SVG include one small comment line crediting MeshSVG, which you can remove freely. There is no license to track and nothing to attribute on your site.
How do I use an SVG pattern as a CSS background?
Click Copy CSS: you get a complete rule with the pattern embedded as a data-URI background-image, plus background-size and background-repeat, so it tiles infinitely with no extra file to host or request to make. Paste it onto any selector. Copy Tailwind gives the same recipe as arbitrary-value utilities for Tailwind v3/v4.
Are these patterns really seamless?
Yes, by construction rather than by eye: every family is built so shapes either stay clear of the tile edges entirely, or cross them with the exact mirrored geometry the neighboring tile continues. That means no visible seams at any scale — resize the tile with the Scale slider and the repeat stays clean.
Can I make the pattern background transparent?
Flip the Background toggle to Transparent and the tile drops its backdrop rectangle, leaving only the pattern shapes. That is how most real sites use these — layered over an existing brand color, a gradient, or a photo, so the pattern adds texture without dictating the palette underneath.
How big are the generated files?
Tiny. A pattern tile is a few hundred bytes of SVG — a handful of circles or one path — repeated infinitely by the browser. Compare that with a repeating PNG texture at tens of kilobytes: the SVG version is sharper on every screen density and effectively free to load, since it ships inline inside your CSS.
What happened to Hero Patterns — is this an alternative?
Hero Patterns popularized exactly this idea but has not been updated in years, and its patterns come as a fixed library with color and opacity knobs only. This generator covers the same use case with live control over scale, weight, and both colors, per-style example pages, plus SVG tile downloads and Tailwind output — and it is actively maintained.
Can I download the pattern as an image?
Both formats are one click: Download SVG saves the single tile as a file you can edit in any vector tool, and Download PNG renders the pattern tiled across a full-resolution canvas — up to 4K — for mockups, wallpapers, or apps that want a raster. The PNG respects a transparent background if you chose one.
Dot patterns → Grid patterns → Line patterns → Topographic patterns → Switching from Hero Patterns? →