Pattern Library Free Online Tool 2026

Last updated March 22, 2026

Checkerboard Pattern

A classic two-color checkerboard using CSS gradients:

.checkerboard {
  background-color: #ffffff;
  background-image:
    repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%);
  background-size: 40px 40px;
}

/* Alternative using linear gradients */
.checkerboard-alt {
  background-color: #e5e7eb;
  background-image:
    repeating-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%),
    repeating-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

Diagonal Stripes

Diagonal stripe patterns in various styles:

/* Thin diagonal stripes */
.stripes-diagonal {
  background-color: #f3f4f6;
  background-image: repeating-linear-gradient(
    45deg,
    #e5e7eb,
    #e5e7eb 2px,
    transparent 2px,
    transparent 12px
  );
}

/* Bold diagonal stripes (like caution tape) */
.stripes-bold {
  background-image: repeating-linear-gradient(
    -45deg,
    #fbbf24,
    #fbbf24 10px,
    #1f2937 10px,
    #1f2937 20px
  );
}

/* Subtle diagonal lines */
.stripes-subtle {
  background-color: #f9fafb;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.05) 0px,
    rgba(0,0,0,0.05) 1px,
    transparent 1px,
    transparent 8px
  );
}

Dot Grid Pattern

Polka dot and grid dot patterns:

/* Polka dots */
.dots {
  background-color: #ffffff;
  background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Larger dots with spacing */
.dots-large {
  background-color: #f8fafc;
  background-image: radial-gradient(circle, #94a3b8 2px, transparent 2px);
  background-size: 32px 32px;
}

/* Colored dots on dark background */
.dots-dark {
  background-color: #1e293b;
  background-image: radial-gradient(circle, #334155 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

Grid / Graph Paper Pattern

Grid patterns for technical and design backgrounds:

/* Simple grid */
.grid {
  background-color: #ffffff;
  background-image:
    linear-gradient(#e5e7eb 1px, transparent 1px),
    linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Graph paper with major and minor lines */
.graph-paper {
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

Herringbone Pattern

A classic woven herringbone texture:

.herringbone {
  background-color: #f5f5f4;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgba(0,0,0,0.08) 5px,
      rgba(0,0,0,0.08) 10px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgba(0,0,0,0.08) 5px,
      rgba(0,0,0,0.08) 10px
    );
}

Hexagon Pattern

Honeycomb hexagon grid:

.hexagons {
  background-color: #f0f9ff;
  background-image:
    radial-gradient(circle farthest-side at 0% 50%, #bae6fd 23.5%, rgba(240,249,255,0) 0) 21px 30px,
    radial-gradient(circle farthest-side at 0% 50%, #e0f2fe 24%, rgba(240,249,255,0) 0) 19px 30px,
    radial-gradient(circle farthest-side at 100% 50%, rgba(240,249,255,0) 23.5%, #bae6fd 0) 21px 30px,
    radial-gradient(circle farthest-side at 100% 50%, rgba(240,249,255,0) 24%, #e0f2fe 0) 19px 30px;
  background-size: 42px 60px;
}

Subtle Noise Texture

A barely-visible grain texture for modern UI backgrounds:

.noise-subtle {
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

Customizing Pattern Colors with CSS Variables

Integrate patterns with a design system using CSS custom properties:

:root {
  --pattern-bg: #ffffff;
  --pattern-color: #e5e7eb;
  --pattern-size: 20px;
}

.pattern-grid {
  background-color: var(--pattern-bg);
  background-image:
    linear-gradient(var(--pattern-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-color) 1px, transparent 1px);
  background-size: var(--pattern-size) var(--pattern-size);
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  :root {
    --pattern-bg: #1e293b;
    --pattern-color: #334155;
  }
}

Text Over Patterns — Accessibility

Ensuring readable text over patterned backgrounds:

/* Method 1: Semi-transparent overlay */
.pattern-with-text {
  position: relative;
  background-image: repeating-linear-gradient(45deg, #e5e7eb 25%, transparent 25%...);
}
.pattern-with-text::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
}
.pattern-with-text .content {
  position: relative;
  z-index: 1;
}

/* Method 2: Use pattern only in areas without text */
.hero {
  background-image: /* pattern */;
  background-position: right center;
  background-size: 50% 100%;
  /* Text is on the left half, pattern on the right */
}