CSS Background Pattern Generator

You want a subtle diagonal stripe pattern behind a pricing section, or a dot grid for a design tool background, but you’d rather not add an image file for a decorative pattern. CSS gradients can create repeating geometric patterns entirely in code — no images, no HTTP requests, infinite scalability. But the background-image syntax for patterns is cryptic. This generator builds the pattern visually.

Why This Tool

Creating CSS patterns from linear-gradient and radial-gradient requires understanding angle math, color stop positions in pixels or percentages, and background-size for tiling. A simple diagonal stripe involves 4 color stops at specific percentages. More complex patterns layer multiple gradients. This tool lets you select a pattern type, adjust colors, size, and spacing, and copies the production-ready CSS.

How CSS Patterns Work

CSS patterns use repeating gradients combined with background-size to create tiles:

/* Simple horizontal stripes */
.stripes {
  background-image: repeating-linear-gradient(
    0deg,
    #e5e7eb 0px,
    #e5e7eb 1px,
    transparent 1px,
    transparent 20px
  );
}

The gradient defines one “tile” of the pattern. background-size and background-repeat (default: repeat) handle the tiling.

Available Patterns

Stripes

Horizontal, vertical, or diagonal lines using linear-gradient:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg, transparent, transparent 10px, #f3f4f6 10px, #f3f4f6 20px
);

Dots

Regular dot grid using radial-gradient:

background-image: radial-gradient(circle, #6b7280 1px, transparent 1px);
background-size: 20px 20px;

Checkerboard

Alternating squares using two overlapping gradients.

Grid Lines

Horizontal and vertical lines creating a graph-paper effect.

Zigzag

Triangular wave pattern using angled gradients.

Pattern Design Tips

1. Subtlety: Use colors close to the background — pattern should enhance, not distract
2. Contrast: Ensure text over patterns remains readable
3. Scale: Smaller patterns (10–20px) feel like textures; larger patterns (40px+) are decorative
4. Performance: CSS patterns render faster than image backgrounds and scale without pixelation

Advantages Over Image Patterns

Frequently Asked Questions

Can I combine multiple CSS patterns? Yes. Use comma-separated background-image values to layer multiple gradients. Each can have its own background-size and background-position. This is how complex patterns like checkerboards and argyle are created.

Will CSS patterns affect performance? For simple patterns (stripes, dots), performance is excellent — better than image backgrounds. Very complex patterns with many layered gradients may impact rendering on low-end devices, but this is rare for typical use cases.

Can I animate CSS patterns? You can animate background-position to create scrolling pattern effects using CSS animations. Animating the gradient itself (colors, stops) requires more complex techniques or CSS Houdini.

Do CSS patterns work in all browsers? Yes. linear-gradient, radial-gradient, and their repeating variants are supported in all modern browsers without prefixes.

How do I make the pattern transparent? Use transparent as one of the gradient colors and set the element’s background-color to the base color you want. The pattern layer sits on top of the background color.