CSS Background Pattern Generator - Stripes, Dots, Grid & More Free

Generate CSS background patterns including stripes, dots, checkerboard, diagonal, grid, and zigzag with custom colors and size

CSS Tools

Tool

Pattern

Color 1

#6366f1

Color 2

#1e293b

Size (20px)

CSS

background-image: repeating-linear-gradient(0deg, #6366f1 0px, #6366f1 10px, #1e293b 10px, #1e293b 20px);
background-size: 20px 20px;

How to Use

1Click one of the 6 pattern presets (stripes, dots, checkerboard, diagonal, grid, zigzag)
2Pick your two colors using the color pickers
3Adjust the size slider to control pattern density
4Copy the generated CSS background properties into your stylesheet

Frequently Asked Questions

CSS background patterns use repeating-linear-gradient and radial-gradient functions to tile geometric shapes. No images are required — everything is pure CSS.

Yes. The gradient functions used are supported in all modern browsers including Chrome, Firefox, Safari, and Edge.

The generator uses hex colors. For transparency effects, you can manually edit the copied CSS to use rgba() or hex colors with an alpha channel.

The size slider controls the backgroundSize, which determines how large each repeating tile is. Smaller values create a denser pattern; larger values space the pattern out more.