CSS Pattern Generator

Generate repeating CSS background patterns (dots, stripes, checkerboard, diagonal, grid, zigzag) with customizable colors and sizes.

Preview

Settings

Pattern

Pattern Size20px

Foreground Color

Background Color

CSS Code

background-color: #ffffff;
background-image: radial-gradient(#d4d4d8 1px, transparent 1px);
background-size: 20px 20px;

Was this page helpful?

Related tools