CSS Pattern Generator

Create repeating CSS background patterns. Dots, stripes, grids, and custom designs.

Pattern Generator

Create repeating CSS background patterns

Pattern Type

Primary Color

Secondary Color

Size: 20px

background: #764ba2;
background-image: radial-gradient(circle, #667eea 2px, transparent 2px);
background-size: 20px 20px;