Transparency checkerboard with CSS gradients

Recreate the familiar image-transparency checkerboard with a few layered CSS gradients. No background image required.

Somehow we have collectively agreed that this small checkerboard pattern means transparency in an image.

Here's the CSS gradient which creates the effect:

.checkerboard {
  background-color: white;
  background-image:
    linear-gradient(45deg, rgb(240, 241, 243) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(240, 241, 243) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(240, 241, 243) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(240, 241, 243) 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
}