CSS gradient checkerboard pattern

Question

I want to create a checkerboard pattern using gradients. I've found an example and modified it to my needs, however it only works with -moz prefix. When I remove the -moz prefix, the pattern is completely different.

How can I make this -moz checkerboard pattern work with unprefixed linear-gradient?

body {   background-image:   linear-gradient(45deg, #808080 25%, transparent 25%),    linear-gradient(-45deg, #808080 25%, transparent 25%),   linear-gradient(45deg, transparent 75%, #808080 75%),   linear-gradient(-45deg, transparent 75%, #808080 75%);    background-size:20px 20px;       background-position:0 0, 10px 0, 10px -10px, 0px 10px; } 

Answer 1

Just modify the background-position like in the below snippet to get the required output. This works fine in Firefox, Chrome, Opera, IE11 and Edge.

body {    background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);    background-size: 20px 20px;    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;  }

The problem seems to be happening because of a difference in the way the angles are handled by the -moz linear gradient and the standard one. -45deg in the -moz linear gradient seems to be equal to 135deg in the standard gradient (but changing the angle is resulting in a strange dot in the middle).

The below screenshots show the difference (both taken in the latest Firefox v44.0).

Output with -moz-linear-gradient:

Output with linear gradient:

Answer 2

The 45deg version works nicely, but can end up showing a line between the triangles at different zoom levels or on retina screens. Depending on what browsers you need to support you can also use background-blend-mode: difference (Caniuse currently shows support nearly everywhere except IE), you can tint the checks using an additional background image:

body {     background-image: /* tint image */                       linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),                       /* checkered effect */                       linear-gradient(to right, black 50%, white 50%),                       linear-gradient(to bottom, black 50%, white 50%);     background-blend-mode: normal, difference, normal;     background-size: 2em 2em; }