CSS Background Patterns: 31 Free Pure-CSS Examples 2026

#css #design #frontend

31 Free CSS Background Patterns 2026

ProofMatcher has 31 pure CSS background patterns — no image files, no SVG imports, infinitely scalable.

Dot Grid

.dots {
  background-color: #050505;
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 24px 24px;
}

Line Grid

.grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

Diagonal Stripes

.stripes {
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 10px,
    rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px
  );
}

Checkerboard

.checker {
  background-color: #111;
  background-image:
    linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
    linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
    linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

Topographic Lines

.topo {
  background:
    radial-gradient(ellipse at center, rgba(229,62,62,0.08) 0%, transparent 70%),
    repeating-linear-gradient(
      0deg, transparent, transparent 30px,
      rgba(255,255,255,0.03) 30px, rgba(255,255,255,0.03) 31px
    );
}