Zellio.io

SVG Pattern Generator

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

Runs locallyWorks offlineShare link carries settings, never your data
Send output toQR Code GeneratorPassword GeneratorFocus TimerBuild a workflow from thisOutput stays on this page until you send it.

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.

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.

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 comparesHero 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.