CSS Gradient Template

Question

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

How can I make this -moz pattern template 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 change the background-position , as in the snippet below, to get the desired output. This works great 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 due to differences in how the corners are handled by the -moz linear gradient and the standard gradient. -45deg in a linear gradient -moz seems to be equal to 135deg in a standard gradient (but changing the angle leads to a weird point in the middle).

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

Exit with -moz-linear-gradient:

Linear Gradient Output:

Answer 2

The 45-degree version works well, but can ultimately show the line between the triangles at different zoom levels or on retina screens. Depending on which browsers you need to support, you can also use background-blend-mode: difference ( caniuse currently supports almost 90%), you can tint 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; } 

Answer 3

It was an implementation of Chrome, when for some time you opened the image with transparency (although later they deleted it in favor of only a solid background).

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

Answer 4

Thanks Harry for the inspiration - here is Scss Mixin to do it

 @mixin checkers($size: 50px, $contrast: 0.07) { $checkerColor: rgba(#000, $contrast); $angle: 45deg; $tp: 25%; background-image: linear-gradient($angle, $checkerColor $tp, transparent $tp), linear-gradient(-$angle, $checkerColor $tp, transparent $tp), linear-gradient($angle, transparent 3 * $tp, $checkerColor 3 * $tp), linear-gradient(-$angle, transparent 3 * $tp, $checkerColor 3 * $tp); background-size: $size $size; background-position: 0 0, 0 $size/2, $size/2 -1 * $size/2, -1 * $size/2 0; }