CSS gradient checkerboard pattern

by

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

More Related Contents:

  1. Gradient text color
  2. SVG gradient using CSS
  3. Blocky gradient effect in CSS3
  4. How can I prevent CSS gradient banding?
  5. Using percentage values with background-position on a linear-gradient
  6. How do I combine a background-image and CSS3 gradient on the same element?
  7. Use CSS3 transitions with gradient backgrounds
  8. How to remove the stripes that appears when using linear gradient property [duplicate]
  9. Border Gradient with Border Radius
  10. Gradient borders
  11. CSS3 Transparency + Gradient
  12. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  13. CSS3 cross browser linear gradient
  14. Gradients in Internet Explorer 9
  15. How does border-image work with linear-gradient?
  16. Can you add noise to a CSS3 gradient?
  17. background image, linear gradient jagged edged result needs to be smooth edged
  18. Why does the linear-gradient disappear when I make an element position:absolute?
  19. Using CSS, can you apply a gradient mask to fade to the background over text?
  20. css text gradient
  21. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  22. How to add animated gradient to an svg path?
  23. Fade image to transparent like a gradient
  24. Fixed gradient background with css
  25. How to draw this chart in html and CSS? [closed]
  26. Bootstrap NavBar with left, center or right aligned items
  27. How do I select an element based on the state of another element in the page with CSS?
  28. What is the best way to clear the CSS style “float”?
  29. Responsive CSS triangle with percents width
  30. Z-index with before pseudo-element

Leave a Comment