CSS Checkered pattern that can be used on all modern browsers.

checkered.css

body {
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%), 
      linear-gradient(135deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size:25px 25px; /* Must be a square */
    background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
}

Tnx. Changed it, so checker size is relative to root font-size, and coloring depend on user color-scheme preference: https://gist.github.com/hallojoe/60225de3433f5970b17a12a528b9915f

background: repeating-conic-gradient(#CCC0% 25%, transparent 0% 50%) 50% / 20px 20px

Glad to have helped.

background: repeating-conic-gradient(#CCC0% 25%, transparent 0% 50%) 50% / 20px 20px

Glad to have helped.

Well, the repeating-conic-gradient gives ugly edges on some zoom levels, and doesn't work on iOS Safari 14.

this approach is still really good and helps when IE11 compatibility is necessary!

In Firefox it creates a faint white line diagonally through some of the squares. It comes and goes when scaling, but also present on 100%. It seems to be better on non retina screens.

@GarthDB changing the background size to an even number appears to fix the "faint white line" display issue.