Background pixelated

I'm looking for a background effect like this (in pure CSS), how can I do this?

(zoomed image)

Code:

html,
body {
  height:100%;
  background-color:#3D3D3D;
  display:flex;
}

div {
  height: 100px;
  width:100px;
  margin:10px auto;
  background-image: linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686), linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686);
  background-position: 0 0, 51px 51px;
  background-color: #222222;
  background-size: 2px 2px;
}

<div></div>

Solution

Here is pure CSS solution create 4 linear-gradients like this with repeat-x and appropriate positioning.

body {
  margin: 0;
  height: 100vh;
  background:
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 25px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 50px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 75px repeat-x,
    linear-gradient(to right,    #222 50%, #3d3d3d 50%) 0 0 / 50px 100px repeat-x;
}

Then repeat linear-gradient many many times. Demo:

body {
  margin: 0;
  height: 100vh;
  background:
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 25px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 50px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 75px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 100px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 125px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 150px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 175px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 200px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 225px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 250px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 275px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 300px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 325px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 350px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 375px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 400px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 425px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 450px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 475px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 500px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 525px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 550px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 575px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 600px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 625px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 650px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 675px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 700px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 725px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 750px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 775px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 800px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 825px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 850px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 875px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 900px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 925px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 950px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 975px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 1000px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1025px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 1050px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1075px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 1100px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1125px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 1150px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1175px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 1200px repeat-x,
    linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1225px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #222    50%) 0 0 / 50px 1250px repeat-x,
    linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1275px repeat-x,
    linear-gradient(to right, #222    50%, #3d3d3d 50%) 0 0 / 50px 1300px repeat-x;
    /* and so on */
}

Of course you can use any programming language or some CSS preprocessor to generate this monster CSS properties.

But to be honest I would use SVG for this thing with 8 squares. Demo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40">
  <rect x="0" y="0" width="10" height="10" fill="#868686"/>
  <rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/>
  <rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/>
  <rect x="10" y="10" width="10" height="10" fill="#222"/>
  <rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/>
  <rect x="10" y="20" width="10" height="10" fill="#868686"/>
  <rect x="0" y="30" width="10" height="10" fill="#222"/>
  <rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/>
</svg>

Demo with SVG (works only in Chrome, you'll need to use external SVG (preferred way) or escape SVG markup):

body {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"><rect x="0" y="0" width="10" height="10" fill="#868686"/><rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/><rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="10" width="10" height="10" fill="#222"/><rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="20" width="10" height="10" fill="#868686"/><rect x="0" y="30" width="10" height="10" fill="#222"/><rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/></svg>') 0 0 / 40px 80px repeat;
}

Demo with escaped inline SVG, works everywhere, but less maintainable:

body {
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3C/svg%3E') 0 0 / 40px 80px repeat;
}