SVG Pattern Generator for Seamless Backgrounds

Free SVG pattern generator for seamless backgrounds

This SVG pattern generator builds tileable vector backgrounds you can paste straight into a stylesheet. Choose one of 16 motifs, set the colors, scale, stroke, rotation and opacity, then copy the CSS or download the SVG or PNG. It is free, runs in your browser and needs no signup.

How to use the SVG pattern generator

1. Pick a motif in SVG Pattern Styles. Each button shows a live thumbnail in your current colors.
2. Set the Foreground color and Background color with the color picker or by typing a HEX value. Use Swap colors to flip them, or tick Transparent background to leave the fill out.
3. Drag Scale (8 to 120 px), Stroke or dot size (0.5 to 8 px), Rotation (0 to 180 degrees) and Opacity (10 to 100%) until the preview looks right.
4. Open the CSS, SVG or Data URI tab under SVG Pattern CSS Code, then press the copy button.
5. Use Copy CSS, Copy SVG, Download SVG, Download PNG or Share link to take the result with you.

SVG pattern styles you can choose

The tool offers 16 seamless SVG pattern styles. They fall into three groups, which helps you predict how stroke size and rotation will behave.

• Filled shapes: Dots, Polka dots and Checkerboard. The Stroke or dot size slider sets the dot radius for the two dot styles.
• Outlined shapes: Grid, Circles, Overlap rings and Plus signs. These are drawn as lines whose thickness follows the stroke slider.
• Lines that run across tile edges: Diagonal lines, Cross hatch, Hexagons, Isometric triangles, Waves, Chevron, Zigzag, Diamonds and Bricks. Each tile also draws the parts of its neighbors that cross its borders, so joins stay complete when the browser repeats it.

SVG pattern settings you can control

• Foreground and background colors: type a 3 or 6 digit HEX code, or a CSS color name, and the preview updates. Convert other formats first with the Color Converter.
• Scale: sets the tile size from 8 to 120 px. The default is 20 px.
• Stroke or dot size: sets line thickness or dot radius. The default is 1.5 px.
• Rotation: turns the motif from 0 to 180 degrees.
• Opacity: fades the motif from 100% down to 10%, which keeps a texture subtle behind content.
• Transparent background: exports only the motif, so the pattern sits on whatever color or image is behind it. The preview then shows a checkerboard.

The line under the preview reports the exact tile size, for example "Tile: 20 × 20 px", so you know what background-size to expect.

How do you use an SVG pattern as a CSS background?

Copy the CSS tab output into your stylesheet and add the pattern-bg class to any element. The rule sets a background-image with an inline SVG, then repeats it with background-size and background-repeat. MDN documents both properties: see background-repeat on MDN.

.pattern-bg {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,...");
  background-size: 20px 20px;
  background-repeat: repeat;
}

Rotated SVG patterns work differently

When Rotation is anything other than 0, the tool stops using a plain repeating tile. It writes an SVG that fills the element and repeats the rotated tile inside it, so no background-size line appears. This follows the SVG pattern element model, where a tile is repeated and transformed.

When to use the SVG tab or the Data URI tab

Use the SVG tab when you want a standalone file or inline markup. Use the Data URI tab when you only need the value for url(), for example inside a CSS variable. The data URI is compact: it uses single quotes and encodes only the characters that need it.

What makes an SVG pattern seamless and tileable?

A seamless SVG pattern is a tile whose edges line up exactly with its own opposite edges. If a line leaves the right side at a given height, it must enter the left side at that same height. The generator handles this for you, but understanding it helps you pick sizes wisely.

Worked example: with the default Scale of 20 px, the Dots style gives a 20 × 20 px tile with one dot at its center. The dot radius is 1.5 × 1.2 = 1.8 px. Every repeat lands exactly 20 px from the last, so spacing is perfectly even.

Hexagons and Isometric triangles are trickier. Their tile height is the Scale times the square root of 3. At 20 px that is about 34.64 px, which the tool rounds to a whole 35 px tile so the browser can repeat it without hairline gaps. Expect tile sizes like 20 × 35 px for these two styles.

Which export format should you choose for an SVG pattern?

Choose CSS for web pages, SVG for design files and PNG when a tool cannot read vectors. The table compares what each output gives you.

SVG pattern background tips and common mistakes

• Check text contrast. A busy pattern behind text hurts reading. WCAG 2.2 asks for at least 4.5:1 for normal text, as explained in the Understanding Contrast (Minimum) page. Test your text color against both the foreground and background colors with the Contrast Checker, or review readability with the Color Legibility Analyzer.
• Keep the two colors close. Low-contrast pairs make a pattern feel like texture instead of noise. Lowering Opacity does the same job.
• Do not shrink the tile too far. At the smallest Scale values, thin strokes can look blurry on standard screens. Raise Scale or Stroke or dot size and check the preview.
• Match the size in your CSS. If you change background-size by hand on an unrotated pattern, keep the width-to-height ratio from the tile line, or hexagons and triangles will distort.
• Remember the transparent option. With Transparent background on, the CSS leaves out background-color, so set your own.
• Do not expect rotation to change tile size. Rotated patterns fill the element, so the exported PNG shows the pattern once at 1024 × 1024 px instead of repeating a small tile.

Why use an SVG pattern instead of a PNG background?

An SVG pattern stays sharp at any zoom level and usually weighs far less than a repeated bitmap. The motif is described with a few shapes, so a tile stays small. That small size is why the CSS output can embed it inline, without an extra file request.

Vector tiles also respond well to high-density screens, where a PNG tile would need a 2x version. You can still export a PNG when you need one. Choose SVG for the web, PNG for apps that cannot read vectors.

Where an SVG pattern background works well

Subtle patterns suit hero sections, cards, empty states, slide decks and printed stationery mockups. Grid and Plus signs fit technical or dashboard layouts. Waves, Dots and Polka dots feel friendlier. Bricks, Chevron and Zigzag suit retro or editorial pages.

Pick colors with intent. Browse ready-made sets in the color palette library, or try the Color Palette Randomizer for a starting pair. Share a finished pattern with a teammate through Share link, which restores every setting.

Next step after you build your pattern

Once the tile is ready, layer it with a soft blend using the Gradient Generator, or try the CSS Mesh Gradient Generator for a smooth color wash behind it. If your brand color is in RGB, the HEX to RGB Converter helps you move between formats before you paste it in.