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 */
}

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.

I was using even numbers (20px 20px for size) but still saw the white diagonal line, what I did was change the first two to go from 26% instead of 25% i.e.

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

This works for even as well as odd numbers at any size.