CSS Background Pattern Generator

Generate seamless CSS background patterns — stripes, diagonal stripes, dots, grid, checkerboard, plaid, tartan, crosshatch, zigzag, waves, and more — using only CSS gradients (no images). Pick a pattern, adjust colors, size, and angle, and copy the ready-to-paste CSS. Pairs with the CSS Gradient and Conic Gradient generators. Everything runs locally in your browser.

Pattern

Colors & size

Color 1

Color 2

Size20px

Angle45°

All patterns are pure CSS — linear-gradient and radial-gradient backgrounds, no images. Adjust the size to scale the pattern; angle applies to stripe and diagonal patterns. Pairs with the CSS Gradient and Conic Gradient generators. Runs locally.