SVG Pattern Generator

Dots, grids, lines, chevrons and hexagons as a repeating SVG tile — copied straight into CSS.

Processed locally — nothing is uploaded

Dots

Tile size24Element scale0.20Stroke1.50Rotate0Opacity0.60Foreground #6366f1Background

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='0.6'%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%236366f1'/%3E%3C/g%3E%3C/svg%3E");
background-size: 24px 24px;

About SVG Pattern Generator

A pattern is one small tile repeated, and the tile is what you export: a few hundred bytes of SVG that CSS repeats for free at any size, with no image request and no blur on high-density screens. The CSS export inlines the tile as a data URI, escaped so it survives quoting, which is the step most hand-made versions get wrong.

A repeating background is one tile drawn once and laid end to end. SVG has a pattern element for exactly this, and CSS can repeat any image, so the tile is the whole product: choose a motif — dots, a grid, diagonal lines, cross-hatch, chevrons, hexagons, waves, plus signs, circles or triangles — set the tile size, the element size within it, the stroke weight, rotation, colours and opacity, and the preview shows the tile repeated across a panel.

The CSS export is the one most people came for. It sets the background colour separately and inlines the tile as a data URI in background-image, with background-size fixed to the tile so the repeat is exact. The URI is escaped for the characters CSS objects to — hashes, angle brackets, braces, and quotes swapped for the other kind — which is the detail that trips up a hand-written version and makes it fail silently in one browser.

The SVG sheet export writes a full document with a pattern definition and a filled rectangle, for a static file or an inline element; the tile export is the bare tile for a design tool or a CSS pipeline that wants the raw asset; the React export converts the sheet into a component. All four are derived from the same handful of numbers, so what you preview is what you copy.

Every parameter is a number or a colour that is validated before it is used. The tool never takes markup from you, and a shared link can only select among the motifs and set values within their ranges. That is deliberate for something that ends up inlined into other people's stylesheets.

Learn how this works

Generating What You Need: QR Codes, Passwords, IDs & FilesA practical guide to generating QR codes, strong passwords, UUIDs, barcodes and PDFs — all free and fully in your browser.8 min read

Frequently asked questions

Why does my pattern look blurry on a phone?

It should not: an SVG tile is vector and re-rasterised at the device's density. If it does, the background was exported as a PNG somewhere along the way. Use the CSS export, which keeps the tile as SVG inside the stylesheet.

How big should the tile be?

Small. A tile of 16 to 32 pixels repeats often enough that the pattern reads as texture rather than as a row of objects, and the SVG stays under a kilobyte. Larger tiles suit motifs with more internal structure, such as hexagons.

Can I rotate the pattern without visible seams?

Yes for the SVG sheet, where rotation is applied to the pattern as a whole and tiles remain continuous. In the CSS export the rotation is inside the tile, which is seamless for symmetric motifs — dots, grids, crosses — and can show a seam on directional ones like chevrons at odd angles; use a multiple of 90 degrees there, or the SVG sheet.

How do I make the pattern subtle?

Lower the opacity rather than choosing a paler colour. Opacity keeps the foreground colour tied to the theme, so a pattern drawn in the brand colour at 8% still reads as the brand when someone looks closely, and it adapts if the background changes.

Is anything sent to a server?

No. Everything runs locally in your browser using standard web APIs — your text, files and inputs are never uploaded to a server, so the tool works even offline once the page has loaded.

Is it free?

Completely. There is no sign-up, no account, no watermark and no usage limit. The tool is supported by unobtrusive ads, not by selling or processing your data.

Pro Tips

→Start at 10% opacity and raise it; backgrounds are noticed only when they are too loud.
→Match the stroke weight to the tile: a 1px stroke in a 64px tile disappears, a 3px stroke in a 12px tile is a wall.
→For dark themes, a light foreground at low opacity on a transparent background lets the section's own colour show through.
→Combine two patterns by layering two background-image declarations in CSS; a grid under sparse dots is a classic.
→Keep the tile SVG in a variable if the design uses it in several places — changing the colour once updates every use.

Common Use Cases

•A subtle texture behind a pricing table or a testimonial section.
•Placeholder backgrounds for cards while images load.
•Graph-paper and dot-grid backgrounds for a whiteboard or canvas tool.
•Decorative header bands that need to scale to any width without an image.
•Print-ready tile SVGs for a designer's pattern library.

How It Compares

Hero Patterns is the reference for this — a large curated library of beautiful tiles, each editable in colour and opacity, and it remains the better choice when you want a distinctive motif designed by hand. This tool covers the geometric basics with every dimension adjustable, adds the SVG sheet and React exports, and encodes the settings in a link so a pattern can be handed over and adjusted rather than re-created.