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:
.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:
.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:
.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:
.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:
.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:
.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:
.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:
.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
.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
.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:
.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:
.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.