Background Pattern Generator

Generate repeatable SVG background patterns.

Tool

Background Pattern Generator

Generate repeatable SVG backgrounds for sections and hero bands. Pick a pattern, adjust colors and settings, then copy CSS or download an asset.

1. Pattern2. Colors3. Controls4. Export

Pattern & preview

Choose a pattern

Contour

Preview

Colors & controls

Foreground color

RGB

Background color

RGB

Scale

24px

Stroke

1.00×

Warp

1.00×

Contour preview matches export colors.

CSS background snippet

background-color: #f9fafb;
background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 role%3D%22img%22 aria-hidden%3D%22true%22%3E%3Crect width%3D%22100%25%22 height%3D%22100%25%22 fill%3D%22%23f9fafb%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;

JSX example for a section background

<div
  style={{
    backgroundColor: "#f9fafb",
    backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 role%3D%22img%22 aria-hidden%3D%22true%22%3E%3Crect width%3D%22100%25%22 height%3D%22100%25%22 fill%3D%22%23f9fafb%22%2F%3E%3C%2Fsvg%3E")',
  }}
>
  {/* Content */}
</div>

Download