Gradient Patterns
Combine repeating gradients with precise stops to create checkerboard, stripe, and grid background patterns.
CSS
Advanced
5 min read
CSS Gradient Patterns
Example
.checker { background: conic-gradient(#ccc 90deg, transparent 90deg) 0 0 / 32px 32px; }
.stripes { background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fff 10px, #fff 20px); }
.dots { background: radial-gradient(circle, #ccc 1px, transparent 1px) 0 0 / 20px 20px; } Pro Tip
background-size controls pattern tile size; combine with background-position for offset.