CSS Background Patterns Without Images

Background patterns add texture and visual interest to web designs, but loading image files for every pattern hurts performance. The good news? CSS gradients can create virtually any repeating pattern—stripes, dots, checkerboards, and beyond—with zero HTTP requests and infinite scalability.

Why CSS Patterns Beat Images

Zero file downloads: Patterns render instantly from CSS
Infinitely scalable: No pixelation at any zoom level
Dynamic customization: Change colors with CSS variables
Smaller bundle size: Patterns live in your stylesheet
Easy animation: Animate background-position for movement

The Foundation: background-size and Repetition

CSS patterns work by defining a small gradient tile and letting background-repeat tile it across the element. The key properties are background-size (tile dimensions) and background-image (the gradient).

Pattern 1: Horizontal Stripes

The simplest pattern uses a linear-gradient with hard color stops:

css

.horizontal-stripes {
  background: repeating-linear-gradient(
    0deg,
    #e0e0e0 0px,
    #e0e0e0 10px,
    #ffffff 10px,
    #ffffff 20px
  );
}

Pattern 2: Diagonal Stripes

Rotate the gradient 45 degrees for diagonal stripes:

css

.diagonal-stripes {
  background: repeating-linear-gradient(
    45deg,
    #3498db 0px,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
}

Pattern 3: Polka Dots

Radial gradients create circular dots. Use two offset gradients for a true polka dot pattern:

css

.polka-dots {
  background-color: #f5f5f5;
  background-image: 
    radial-gradient(#333 15%, transparent 16%),
    radial-gradient(#333 15%, transparent 16%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

Pattern 4: Checkerboard

Combine two linear gradients with clever positioning:

css

.checkerboard {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

Pattern 5: Grid Lines

Create a graph paper effect with crossed linear gradients:

css

.grid-lines {
  background-color: #fff;
  background-image:
    linear-gradient(#e0e0e0 1px, transparent 1px),
    linear-gradient(90deg, #e0e0e0 1px, transparent 1px);
  background-size: 20px 20px;
}

Pattern 6: Zigzag

Combine two opposing diagonal gradients for a zigzag border effect:

css

.zigzag {
  background: 
    linear-gradient(135deg, #667eea 25%, transparent 25%) -20px 0,
    linear-gradient(225deg, #667eea 25%, transparent 25%) -20px 0,
    linear-gradient(315deg, #667eea 25%, transparent 25%),
    linear-gradient(45deg, #667eea 25%, transparent 25%);
  background-size: 40px 40px;
  background-color: #f5f5f5;
}

Pattern 7: Conic Gradient Rays

Conic gradients create sunburst and ray patterns:

css

.sunburst {
  background: repeating-conic-gradient(
    from 0deg,
    #f5f5f5 0deg 10deg,
    #e0e0e0 10deg 20deg
  );
  background-size: 100px 100px;
}

Pattern 8: Carbon Fiber

A complex pattern combining multiple gradients for a textured look:

css

.carbon-fiber {
  background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313;
  background-size: 20px 20px;
}

Pattern 9: Triangles

css

.triangles {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #667eea 50%, transparent 50%),
    linear-gradient(-45deg, #667eea 50%, transparent 50%);
  background-size: 20px 10px;
}

Pattern 10: Honeycomb

css

.honeycomb {
  background-color: #f5f5f5;
  background-image:
    radial-gradient(circle farthest-side at 0% 50%, #f5f5f5 23.5%, transparent 0) 21px 30px,
    radial-gradient(circle farthest-side at 0% 50%, #e0e0e0 24%, transparent 0) 19px 30px,
    linear-gradient(#f5f5f5 14%, transparent 0, transparent 85%, #f5f5f5 0) 0 0,
    linear-gradient(150deg, #f5f5f5 24%, #e0e0e0 0, #e0e0e0 26%, transparent 0, transparent 74%, #e0e0e0 0, #e0e0e0 76%, #f5f5f5 0) 0 0,
    linear-gradient(30deg, #f5f5f5 24%, #e0e0e0 0, #e0e0e0 26%, transparent 0, transparent 74%, #e0e0e0 0, #e0e0e0 76%, #f5f5f5 0) 0 0,
    linear-gradient(90deg, #e0e0e0 2%, #f5f5f5 0, #f5f5f5 98%, #e0e0e0 0%) 0 0;
  background-size: 40px 60px;
}

Making Patterns Dynamic with CSS Variables

Use CSS custom properties for easy theming:

css

.dynamic-stripes {
  --stripe-color: #667eea;
  --stripe-bg: #f5f5f5;
  --stripe-size: 20px;
  
  background: repeating-linear-gradient(
    45deg,
    var(--stripe-color) 0px,
    var(--stripe-color) calc(var(--stripe-size) / 2),
    var(--stripe-bg) calc(var(--stripe-size) / 2),
    var(--stripe-bg) var(--stripe-size)
  );
}

Animating Patterns

Animate background-position for scrolling patterns:

css

.animated-stripes {
  background: repeating-linear-gradient(
    45deg,
    #667eea 0px 10px,
    #764ba2 10px 20px
  );
  background-size: 28.28px 28.28px; /* sqrt(2) * 20 */
  animation: stripe-scroll 1s linear infinite;
}

@keyframes stripe-scroll {
  to { background-position: 28.28px 0; }
}

Generate Patterns Visually

Writing complex gradient patterns by hand is tricky. Use the stellae.design pattern generator to design patterns visually and export production-ready CSS.

Conclusion

CSS gradient patterns are a powerful, performant alternative to image-based backgrounds. Start with simple stripes and dots, then combine gradients for complex effects. With CSS variables, you can theme patterns on the fly—perfect for dark mode support or brand customization. The patterns above give you a solid foundation; experiment by adjusting sizes, angles, and colors to create your own unique designs.