What it produces
Two artifacts come out of every configuration. The first is the SVG for a single tile: a small square document containing a background rectangle and the shapes, sized to your tile dimension. The second is a CSS block with that SVG embedded as a data URI in a background-image rule, alongside a matching background-color and a background-size that makes the tile repeat at the right scale.
The CSS snippet is usually the one you want. It is self-contained, needs no separate file, no HTTP request, and no build step, and it drops straight into a stylesheet or a style attribute. Because the pattern is vector, it stays sharp on any display density, and because it is a tiny piece of text rather than an image, it costs almost nothing to load.
A live preview shows several tiles side by side rather than one, which is the only honest way to display a repeating pattern. A single tile tells you nothing about whether the repeat lines up; a grid of them tells you immediately.
- A raw SVG tile and a complete CSS background rule, both copyable
- The CSS version needs no file, no request, and no build step
- The preview shows a grid of tiles, so the repeat is visible
The controls and what each one changes
Tile size sets the square the pattern repeats in, from 8 to 80 pixels. It is the strongest control over how the background reads: a small tile gives a fine texture that reads almost as a tone, a large tile gives a distinct motif you can pick out individually. Shape scale, expressed as a percentage of the tile, sets how large the shapes are within that square, so dots go from a subtle speckle to nearly touching circles.
Stroke width applies to the patterns drawn with lines rather than filled shapes, which is the grid, the diagonal lines, the crosses, and the zigzag. A one pixel stroke at a large tile size gives a delicate technical-drawing look; a heavier stroke at a small tile fills the space quickly and reads as a solid texture.
The two colors are the background and the shapes. Both accept the usual CSS color forms, and the practical advice is to keep the contrast between them low. A pattern is a background, and a background that competes with the text on top of it is a mistake that looks fine in isolation and fails the moment there is content.
Using patterns without wrecking readability
The most common error with a generated pattern is using it at full strength behind body text. Even a subtle repeat adds visual noise, and noise costs reading speed. Keep the two colors close together in lightness, or put the pattern behind a heading area, a hero band, a card, or an empty section rather than behind paragraphs.
Tile size interacts with layout in a way that is easy to miss. A pattern with a distinct motif at 60 pixels will look completely different in a narrow card than across a full-width section, because the eye reads the repeat frequency rather than the shape. Preview it at the actual size it will be used at, not just in the tool.
One accessibility point is worth stating. A patterned background reduces effective contrast between text and its backdrop, and contrast requirements apply to the actual rendered result rather than to the base color alone. If a pattern sits behind text, check the contrast with the pattern in place, and darken or lighten the base color if it fails.
- Keep the two colors close in lightness when the pattern sits behind text
- Preview at the real width; repeat frequency changes how a motif reads
- Check text contrast with the pattern in place, not against the base color alone