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

Press Copy CSS. It copies three lines: background-image with the SVG as a data URL, background-size set to the tile (40px 40px for the starting dots, 34px 58.89px for the Honeycomb preset) and background-repeat: repeat. Paste them into the rule for the element that should carry the pattern.

Is the pattern seamless when it repeats?

Yes, for every shape: each part of a shape that sticks out over one edge of the tile is drawn again coming in from the opposite edge, so the edges meet. Stripes snap to 0, 45, 90 or 135° because only those angles repeat inside a square tile, so a rotation of 30° is drawn at 45° and the page says so.

Why are the Size or Rotation sliders grayed out?

A circle looks the same turned, and the checker, hexagon and triangle lattices have a fixed direction, so Rotation is disabled for them. Size is disabled for checker and triangle, whose cells fill the tile. For the other shapes an element is never drawn larger than the spacing: size 60 at spacing 40 is drawn at 40.

What does Color 2 do?

It draws a second set of shapes on the offset lattice: circles of 0.7 times the size on the tile corners for dots (radius 7 px around the starting 20 px dots), smaller squares or plus signs between the main ones, a stripe halfway between stripes, the other two squares of the checkerboard, the downward triangles, and a fill in every other hexagon. Untick Use a second color, or clear its hex box, to leave it out.

Can I download the pattern as SVG or PNG?

Yes. SVG downloads one tile as pattern.svg (40 x 40 for the starting dots). PNG comes as a square of 256, 512, 1024 or 2048 px, a banner or social size (1200 × 630 for a link card, 1500 × 500, 1920 × 1080 or 1080 × 1920) or a custom width and height from 1 to 4096 px, named for example pattern-1200x630.png, with the tile repeated at its real spacing rather than one tile stretched to fill it. Ctrl or Cmd + S downloads the SVG and Ctrl or Cmd + Shift + C copies the CSS.

SVG Pattern Generator

Make a seamless SVG pattern tile of dots, squares, plus signs, stripes, checkers, hexagons or triangles; copy CSS with background-size or save SVG or PNG. How it works

Shape

Pattern Color

Color 2

Use a second color

Background

Size (20px)

Circle diameter.

Spacing (40px)

Opacity (1)

Rotation (0°)

Not used: a circle looks the same turned.

Pattern Presets

Live pattern preview

circle · 40×40px tile

1×1

2×2

4×4

SVG Code

<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" r="10" fill="#007bff" />
      <circle cx="0" cy="0" r="7" fill="#60a5fa" />
      <circle cx="0" cy="40" r="7" fill="#60a5fa" />
      <circle cx="40" cy="0" r="7" fill="#60a5fa" />
      <circle cx="40" cy="40" r="7" fill="#60a5fa" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="40" height="40" fill="#f0f9ff" />
  <rect x="0" y="0" width="40" height="40" fill="url(#pattern)" />
</svg>

Copy CSS adds background-size: 40px 40px so the tile repeats at its real spacing.

Export your pattern

Export PNG (repeats the tile at 40px spacing):

Shortcuts: Ctrl/⌘ S Download SVG · Ctrl/⌘ ⇧ C Copy CSS

About the SVG Pattern Generator

A seamless SVG pattern is one tile that repeats edge to edge: here the tile is spacing x spacing for dots, squares, plus signs, stripes and checkers, spacing wide and spacing × √3 tall for hexagons, and spacing × √3 ÷ 2 tall for triangles, so the starting 40 px dots use a 40 x 40 tile. Anything that crosses an edge of the tile is drawn again on the opposite edge, and Copy CSS adds background-size: 40px 40px so the tile repeats at its real size.

Tile size by shape and spacing (width x height, px)

Shape	Spacing 20	Spacing 40	Spacing 100
Circle	20 x 20	40 x 40	100 x 100
Rect	20 x 20	40 x 40	100 x 100
Cross	20 x 20	40 x 40	100 x 100
Line	20 x 20	40 x 40	100 x 100
Checker	20 x 20	40 x 40	100 x 100
Hexagon	20 x 34.641	40 x 69.282	100 x 173.205
Triangle	20 x 17.321	40 x 34.641	100 x 86.603

Copy CSS writes this size as background-size. Spacing goes from 10 to 200 px; sizes are rounded to 3 decimals.

The presets

Preset	Shape	Size (px)	Spacing (px)	Opacity	Rotation	Tile (px)
Polka Dots	Circle	12	32	0.8	0°	32 x 32
Diagonal Stripes	Line	20	28	0.9	45°	28 x 28
Honeycomb	Hexagon	12	34	0.85	0°	34 x 58.89
Checkerboard	Checker	16	32	1	0°	32 x 32
Plus Signs	Cross	14	28	0.75	0°	28 x 28
Triangles	Triangle	24	48	0.7	0°	48 x 41.569
Diamonds	Rect	20	40	0.85	45°	40 x 40

Frequently asked questions

How do I use an SVG pattern as a CSS background?: Press Copy CSS. It copies three lines: background-image with the SVG as a data URL, background-size set to the tile (40px 40px for the starting dots, 34px 58.89px for the Honeycomb preset) and background-repeat: repeat. Paste them into the rule for the element that should carry the pattern.
Is the pattern seamless when it repeats?: Yes, for every shape: each part of a shape that sticks out over one edge of the tile is drawn again coming in from the opposite edge, so the edges meet. Stripes snap to 0, 45, 90 or 135° because only those angles repeat inside a square tile, so a rotation of 30° is drawn at 45° and the page says so.
Why are the Size or Rotation sliders grayed out?: A circle looks the same turned, and the checker, hexagon and triangle lattices have a fixed direction, so Rotation is disabled for them. Size is disabled for checker and triangle, whose cells fill the tile. For the other shapes an element is never drawn larger than the spacing: size 60 at spacing 40 is drawn at 40.
What does Color 2 do?: It draws a second set of shapes on the offset lattice: circles of 0.7 times the size on the tile corners for dots (radius 7 px around the starting 20 px dots), smaller squares or plus signs between the main ones, a stripe halfway between stripes, the other two squares of the checkerboard, the downward triangles, and a fill in every other hexagon. Untick Use a second color, or clear its hex box, to leave it out.
Can I download the pattern as SVG or PNG?: Yes. SVG downloads one tile as pattern.svg (40 x 40 for the starting dots). PNG comes as a square of 256, 512, 1024 or 2048 px, a banner or social size (1200 × 630 for a link card, 1500 × 500, 1920 × 1080 or 1080 × 1920) or a custom width and height from 1 to 4096 px, named for example pattern-1200x630.png, with the tile repeated at its real spacing rather than one tile stretched to fill it. Ctrl or Cmd + S downloads the SVG and Ctrl or Cmd + Shift + C copies the CSS.

Backgrounds that repeat without a join

Faint dots behind a hero block, a checkerboard behind a transparent product image, a honeycomb on a slide or diagonal stripes on a warning banner all come from one small tile repeated by CSS. Start from a preset (Polka Dots, Diagonal Stripes, Honeycomb, Checkerboard, Plus Signs, Triangles, Diamonds) or pick a shape, then set the colors, size, spacing, opacity and rotation. Random picks a shape, size, spacing, opacity, rotation and three colors. The 1×1, 2×2 and 4×4 previews show the tile at three densities. Then copy the SVG or the CSS, copy a share link, or download pattern.svg or a PNG: a square of 256 to 2048 px, a banner or social size (1200 × 630, 1500 × 500, 1920 × 1080, 1080 × 1920) or a custom size up to 4096 × 4096.

How the tile is built

A pattern is one rectangular tile that repeats. Its size depends on the shape:

circle, rect, cross, line, checker: width = height = spacing
hexagon: width = spacing, height = spacing × √3
triangle: width = spacing, height = spacing × √3 ÷ 2

The shape is drawn in the tile together with every copy of it shifted by a whole tile that still reaches in. An element is never drawn larger than the spacing (size 60 at spacing 40 is drawn at 40), stripes snap to 0, 45, 90 or 135° (30° is drawn at 45°), and opacity is applied once to each run of one color, so overlapping parts are not painted twice.

Example: the starting dots have spacing 40 and size 20. The tile is 40 x 40 with a circle of radius 10 at (20, 20) and second-color circles of radius 7 on the four corners, which join into one circle wherever four tiles meet. Copy CSS gives the SVG as a data URL plus background-size: 40px 40px; and background-repeat: repeat;. The Honeycomb preset, at spacing 34, has a 34 x 58.89 px tile.

Related Tools

View all tools

CSS

SVG Blob Generator

Make an organic SVG blob: set complexity, contrast and smoothness, pick a color, gradient or image fill, then copy SVG, CSS or React, or save a PNG.

CSS

SVG Wave Generator

Make an SVG wave divider for the top or bottom of a section: set points, amplitude, curve bend, size and color, then copy the SVG or download SVG or PNG.

Dev

SVG Code Viewer

Paste SVG code to preview it as an image with scripts, event handlers and outside links removed, list its colors and elements, minify it or export React TSX.

Dev

SVG to CSS Background Converter

Convert SVG markup to a CSS background-image data URI, URL-encoded or Base64. Adds a missing xmlns, rejects non-SVG input, gives url() or inline-style output.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.