31 Free CSS Background Patterns 2026

ProofMatcher has 31 pure CSS background patterns — no image files, no SVG imports, infinitely scalable.

Dot Grid

.dots { background-color : #050505 ; background-image : radial-gradient ( rgba ( 255 , 255 , 255 , 0.15 ) 1px , transparent 1px ); background-size : 24px 24px ; }

Enter fullscreen mode

Exit fullscreen mode

Line Grid

.grid { background-image : linear-gradient ( rgba ( 255 , 255 , 255 , 0.04 ) 1px , transparent 1px ), linear-gradient ( 90deg , rgba ( 255 , 255 , 255 , 0.04 ) 1px , transparent 1px ); background-size : 32px 32px ; }

Enter fullscreen mode

Exit fullscreen mode

Diagonal Stripes

.stripes { background : repeating-linear-gradient ( 45deg , transparent , transparent 10px , rgba ( 255 , 255 , 255 , 0.03 ) 10px , rgba ( 255 , 255 , 255 , 0.03 ) 20px ); }

Enter fullscreen mode

Exit fullscreen mode

Checkerboard

.checker { background-color : #111 ; background-image : linear-gradient ( 45deg , #1a1a1a 25% , transparent 25% ), linear-gradient (…