Background Pixelization

Question

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

(enlarged 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> 

Answer 1

Here is a clean 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 times. Demo video:

 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 CSS preprocessor to create these CSS monster properties.

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

 <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> 

Demonstration using SVG (works only in Chrome, you will need to use external SVG (preferred option) or avoid 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; } 

A demo with a shielded embedded 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; } 

Answer 2

Option 1: it’s easier, more flexible and more efficient to use base64, which can be easily created using http://www.patternify.com (or something similar). Base64 will be created, which can be implemented as a background-image URL with repeat .

Option 2: Only CSS solution from CSS3 Pie. Adjust the colors if necessary.

 body { margin: 0; } div { padding: 100vh 100vw 0 0; background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, -moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); background-size: 20px 20px; background-color: #131313; -pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px / 20px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px / 20px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px / 20px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px / 20px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px, linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) 0 0 / 20px #131313; } 

 <div></div> 

Source: http://css3pie.com/demos/gradient-patterns/

Answer 3

Not a completely necessary background, but I think it is simple and easy to use.

 div{ position: absolute; width: 200px; height: 200px; background: -webkit-repeating-linear-gradient(180deg, transparent, #868686 10%, #fff 10%); background-color: #222222; } div.last{ background: -webkit-repeating-linear-gradient(transparent, #868686 10%, #fff 10%); } 

 <div></div> <div class="last"></div>