CSS Background Pattern Generator

Create repeating CSS background patterns.

Pattern

Color 1

Color 2

Size: 20px

.pattern {
  background-color: #ffffff;
background-image:
  linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
  linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
  linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}