Background Pattern Generator
Generates tileable SVG patterns — stripes, dots, grids, noise — with colour and scale controls.
Draws a seamless background pattern — dots, grid, stripes, checks, crosses, triangles or waves — and hands it back as a CSS data URI, an SVG file, or a `<pattern>` fragment to paste into an existing document. Rotation is applied as `patternTransform`, so the tile stays seamless rather than breaking at its own edges.
Pattern
The quietest pattern there is. Keep the dot under a fifth of the tile or it reads as texture rather than pattern.
Output
450 bytes as a URL-encoded URI against 526 as Base64.
URL-encoded rather than Base64 — 14% smaller here, and still readable in the stylesheet. The SVG data-URI encoder does the same for any SVG.
How to use it
Pick the shape
Each one says what it is for. Dots are the quietest; a grid is legible behind a diagram and distracting behind text; diagonal stripes are the "work in progress" fill everyone recognises.
Set the tile size and the weight
Weight is a fraction of the tile rather than a pixel value, so the pattern keeps its character when you resize the tile. Above about a fifth the shape stops reading as a pattern and starts reading as texture.
Keep the contrast low
This is the decision that makes or breaks a background. A pattern that is visible is usually already too strong: pick a foreground a step or two from the background rather than a contrasting colour, and check it behind real text before shipping.
Take the CSS, the file, or the fragment
The CSS is a URL-encoded data URI ready for `background-image`. The SVG file is for anywhere a URI will not do. The `<pattern>` fragment goes inside an existing `<svg>` and is referenced as `fill="url(#p)"`.
Common questions
Will it tile without a seam?
Yes, and that is the part the geometry is doing work for. The diagonal stripes are drawn as three wrapped copies so the diagonal continues across the tile edge, and the wave is two cubic segments matched in slope at the join. Rotation goes through `patternTransform` for the same reason — rotating the geometry inside the tile would leave cut ends at the boundary.
Can I export a PNG?
Not here. The output is SVG in three wrappings, which is resolution independent and a fraction of the size — a dot pattern is a few hundred bytes as a data URI and would be a few kilobytes as a PNG tile. If a raster is required, download the SVG and rasterise it.
Does a background pattern hurt performance?
Rarely, but there is a real case: a very small tile over a very large area makes the compositor repeat it a great many times, and on a low-end phone that shows up in scroll. If a page feels heavy with a pattern on it, try a larger tile with the same apparent density.
Can I use a pattern as a texture over an image?
Yes — turn on the transparent background and the tile carries only the foreground shapes, so whatever is behind shows through. Stack it as a second `background-image` layer above the photo.
Feed it from
CSS Gradient Builder
Builds linear, radial and conic gradients with draggable stops and emits the CSS, in sRGB or OKLCH.
Social Card Generator
Composes a 1200×630 share image from a title, subtitle, brand line and optional logo on a chosen template, and writes the meta tags to go with it.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Next
These accept what this tool produces, so the result can go straight in.
CSS Gradient Builder
Builds linear, radial and conic gradients with draggable stops and emits the CSS, in sRGB or OKLCH.
Social Card Generator
Composes a 1200×630 share image from a title, subtitle, brand line and optional logo on a chosen template, and writes the meta tags to go with it.
SVG to CSS Data URI
Encodes an SVG as a CSS background data URI, escaping only what needs escaping to keep it small.
SVG Optimiser
Removes editor cruft, collapses transforms and rounds path precision, showing the rendered diff.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.