SVG Pattern Background Generator

Pick a pattern type, choose your colors and scale, then copy the ready-to-paste CSS or SVG code.

Pattern type

Foreground color

Background color

Size (px) 20

Spacing / thickness 2

Opacity 100%

Preview

Generated code

Runs entirely in your browser. Nothing is uploaded.

How it works

STEP 1

Select dots, grid, waves, or hexagons from the pattern menu.

STEP 2

Set foreground color, background color, and control size and spacing.

STEP 3

Click "Copy CSS" or "Copy SVG" to grab ready-to-use code for your project.