Free Online CSS Pattern Generator

1. Pick a pattern: Dots, Horizontal stripes, Vertical stripes, Grid, Diagonal lines, or Checkerboard.
2. Pick a Foreground color and a Background color.
3. Drag the Size slider to set the pattern's repeat spacing.
4. Click Copy CSS to copy the background declarations.

All of these patterns are built from CSS gradient functions paired with `background-size`. Dots are a `radial-gradient` set to a small repeating background-size; horizontal and vertical stripes are `repeating-linear-gradient` with hard color stops; grids are two perpendicular `linear-gradient`s stacked at a small repeat; diagonal stripes use a 45° repeating-linear-gradient; checkerboards layer four 45° gradients with offset positions.

No image assets are needed, so the result scales infinitely without quality loss, is trivial to recolor with CSS variables, and adds zero bytes to your network payload. Designers use patterns as subtle background textures on hero sections; engineers use them as placeholder backgrounds during development; print-style sites use them to evoke graph paper or engineering blueprints.

The generator gives you six pattern types plus controls for foreground color, background color and repeat size. The output is the CSS you can drop into any stylesheet.