Menu
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; } 
887
Using HTML, CSS creates a checkerboard background pattern. Use background-color to set a white background. Use background-image with two linear-gradient() values. Give each one a different angle to create the checkerboard pattern.
There are 3 different CSS gradients: linear, conic, and radial. Each gradient uses a CSS function to pass in multiple color arguments. The colors can be in the format of hex, hsla, rgba or named colors. In addition, you can pass in direction and angles to specify the shape and transition of the gradient.
To create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead. Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used.
A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a length, the color-stops of a conic gradient are specified with an angle.
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:
86
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; }If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
