Skip to content

Instantly share code, notes, and snippets.

@dfrankland

dfrankland/checkered.css

Created August 25, 2016 21:30
Show Gist options
  • Save dfrankland/f6fed3e3ccc42e3de482b324126f9542 to your computer and use it in GitHub Desktop.
Save dfrankland/f6fed3e3ccc42e3de482b324126f9542 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Checkered pattern that can be used on all modern browsers.
Raw
checkered.css
body {
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(135deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(135deg, transparent 75%, #ccc 75%);
background-size:25px 25px; /* Must be a square */
background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
}
@SidOfc
Copy link

SidOfc commented Aug 20, 2024 •
edited
Loading

I was using even numbers (20px 20px for size) but still saw the white diagonal line, what I did was change the first two to go from 26% instead of 25% i.e.

    background-image:
      linear-gradient(45deg, #ccc 26%, transparent 26%), 
      linear-gradient(135deg, #ccc 26%, transparent 26%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px; /* Must be a square */
    background-position: 0 0, 10px 0, 10px -10px, 0px 10px; /* Must be half of one side of the square */
image

This works for even as well as odd numbers at any size.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment