SVG Pattern Generator, Seamless Backgrounds, Free
Make a seamless SVG background pattern in your browser. Choose dots, stripes, grid, zigzag, waves, hexagons and more, then set size, spacing, rotation, colours and opacity. Copy the CSS or SVG, or download SVG and PNG. Nothing is uploaded.
This shape is filled, so it has no stroke.
Tile size: 36 by 36 px.
About the SVG Pattern Generator
The SVG Pattern Generator makes a seamless repeating background from one small shape. Pick a Shape, set its Size and Spacing, turn the whole pattern with Rotation, choose the Foreground and Background colours and the Opacity, and watch the preview change as you move each control. Then copy the CSS for a web page, copy the pattern SVG for another SVG file, or download the result as an SVG or a 1920 by 1080 PNG.
All of it is drawn in your browser. Your settings and the pattern never leave your device, nothing is uploaded or stored, and the page works without a connection once it has loaded.
How to use it
Steps
- Choose a Shape: dots, stripes, diagonal stripes, grid, zigzag, waves, triangles, hexagons, crosses or checkerboard.
- Adjust Size, Spacing, Stroke width, Rotation and Opacity, then pick the two colours.
- Press Copy CSS and paste it into a rule such as
.hero { … }, or press Copy pattern SVG, Download SVG or Download PNG.
Size, spacing and the repeating tile
Every pattern is one square tile that repeats in both directions. The tile edge, called the period, is the shape size plus the spacing:
With Size 20 and Spacing 10 the tile is pixels wide and tall, and the note under the preview says so. A bigger spacing leaves more background between the shapes, and a spacing of 0 makes neighbouring shapes touch. Lines such as stripes, grid, zigzag and waves run across the whole tile, so they join up from one tile to the next without a seam. Dots, triangles, hexagons and crosses sit in the middle of the tile, and the checkerboard splits it into four squares.
Stroke and fill
Line shapes (stripes, diagonal stripes, grid, zigzag, waves, hexagons and crosses) are drawn with a stroke, and Stroke width sets its thickness from 1 to 20 pixels. Dots, triangles and checkerboard are solid, so Stroke width is switched off for them and the page says why.
Rotation
Rotation turns the pattern clockwise by 0 to 360 degrees. At 0, 90, 180 and 270 degrees a square tile maps onto itself, so the turn is built into one small tile and the CSS stays short. At any other angle the tile can no longer be a single image, so the CSS uses a full-size SVG that fills a rectangle with the rotated pattern and adds background-size: 100% 100%. Both forms repeat without seams.
Using the CSS
The copied text is a background-image declaration that holds the SVG as a data URI, so there is no file to host or request. Only the characters that CSS cannot take in a quoted address are escaped: %, #, < and >. The SVG inside uses single quotes so it fits in the double quotes of url("…"). For example, a 30 pixel tile of dots gives a declaration of a few hundred characters that you paste straight into a stylesheet. If you minify your styles afterwards, the CSS Minifier leaves the address untouched.
Other formats
Copy pattern SVG gives only the <pattern> element, ready to place inside the <defs> of an SVG you already have and fill with url(#pattern). Download SVG saves a whole, standalone file, and Download PNG draws the full 1920 by 1080 panel as a bitmap named pattern.png. To change its format or size, use the Image Converter. For organic shapes to place over a pattern, try the SVG Blob Generator.
Frequently asked questions
Is my pattern uploaded anywhere?
No. The pattern, the CSS and the files are made in your browser, so nothing is sent, logged or stored. Closing the tab clears your settings.
How do I use the pattern as a CSS background?
Press Copy CSS and paste the result into a rule, for example .hero { background-image: url(...); }. The SVG is stored inside the URL as a data URI, so there is no extra file to host.
What do size and spacing do?
Size is the width of the shape and spacing is the empty gap added around it. The repeating tile is size plus spacing in both directions, so size 20 and spacing 10 give a 30 pixel tile. Stripes, grid, zigzag and waves run across the whole tile, so they still join up.
Why is the stroke width greyed out?
Dots, triangles and checkerboard are solid shapes, so they have no outline to thicken. Choose stripes, diagonal stripes, grid, zigzag, waves, hexagons or crosses to use Stroke width.
Does the pattern repeat without seams when rotated?
Yes. At 0, 90, 180 and 270 degrees the rotation is built into a single square tile. At other angles the CSS uses a full-size SVG with a rotated pattern fill and a background size of 100 percent by 100 percent, which also has no seams.
How large is the PNG?
The PNG is always 1920 by 1080 pixels and shows the pattern across the whole panel. For other sizes, use the SVG, which scales without losing sharpness, or resize the PNG with the Image Resizer.