CSS gradient checkerboard pattern

css gradient linear-gradients
Maciej Krawczyk picture Maciej Krawczyk · Feb 12, 2016 · Viewed 26.9k times · Source

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. comparison of patterns : normal vs. -moz

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

Harry picture Harry · Feb 12, 2016

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:

enter image description here

Output with linear gradient:

enter image description here

Related questions

Gradient text color

Is there a generator , or an easy way to generate text like this but without having to define every letter So something like this: But not with rainbow colors but generate with other colors (for example white to grey/light …

Read More
SVG gradient using CSS

I'm trying to get a gradient applied to an SVG rect element. Currently, I'm using the fill attribute. In my CSS file: rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } And the rect element has the correct fill color …

Read More
How can I prevent CSS gradient banding?

I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site …

Read More