Grid rasterindeling in achtergrond met CSS

Hoe maak je een raster (zoals grafiek raster) met alleen CSS? Om rasters te maken kun je CSS-verlopen gebruiken, die werken op alle moderne browsers (zie Caniuse).

Gebruik lineaire kleurverlopen om een gelijnd raster te tekenen:

body {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

Gebruik een radiaal verloop om een raster met gestippelde hoeken te tekenen:

body {
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}