Pure CSS· No images · No JavaScript

1. Pattern

2. Colors

Background

Pattern

Pattern opacity

Dot size

Spacing

Scale

.pattern {
  background-color: #ffffff;
  background-image: radial-gradient(circle, #6366f1 2px, transparent 2.5px);
  background-size: 24px 24px;
}

Minimal

Modern

Retro

Decorative

Create beautiful CSS background patterns visually. Customize colors, size, spacing, and style, then copy the CSS instantly.

More free CSS generators you might like.

Create beautiful, animated CSS gradients visually.

Design vibrant mesh gradients visually.

Create frosted glass UI panels.

Generate harmonious color palettes.