CSS Gradient Checkerboard Pattern

CSS gradient checkerboard pattern

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;}

How to create a responsive checkerboard background in CSS?

Here is an idea that rely on conic-gradient:

.chess {
  background:
    repeating-conic-gradient(
        #fff 0 90deg,
        grey 0 180deg) 
    0 0/25% 25%;
  margin: 15px;
  padding:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

Checkerboard CSS pattern bug (diagonal unaesthetic line)

I've found a workaround by using inline-svg into css.

Works with all Windows browsers, and Android browsers, but i'm not secure that this works with OSX (MAC).

.testcheckerboard{  width: 200px;  height: 100px;  background-size: 40px 40px;
  background-color: white;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(0,0,0)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");}

<div class="testcheckerboard"></div>

How do I make a responsive grid with a checkered pattern?

If you know the number of rows or you know at least their max value you can easily achieve this using gradient and multiple background. The only drawback is that the coloration will be on the container so you can have empty cells colored too.

.grid {
  display: grid;
  margin:10px 0;
  counter-reset: spans;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 40px;
  --grad:repeating-linear-gradient(to right,red 0 calc(50% / var(--cols)),blue calc(50% / var(--cols))  calc(100% / var(--cols)));
  background:
    var(--grad),
    var(--grad),
    var(--grad),
    var(--grad),
    var(--grad);
  background-size:200% 40px;
  background-position: 
    0                        calc(0*40px),
    calc(100% / var(--cols)) calc(1*40px),
    0                        calc(2*40px),
    calc(100% / var(--cols)) calc(3*40px),
    0                        calc(4*40px);
  background-repeat:no-repeat;
}

.grid > * {
  counter-increment: spans;
  text-align: center;
  padding: 10px 0;
  color: #fff;
}

.grid > *::after {
  content: counter(spans);
}

<div class="grid" style="--cols: 5;">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="grid" style="--cols: 4;">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="grid" style="--cols: 8;">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

How to make checkered chess board pattern with CSS

I don't know if this is what you'd call elegant but I've colored every piece manually by selecting odd and even on different rows. This gives you your chessboard. You can templatize this if you're using SASS or so but in pure CSS, I cannot think of a simpler way to do this. Maybe someone can provide a better way for you.

.board-sqr:nth-child(n + 1):nth-child(odd):nth-child(-n + 8),
.board-sqr:nth-child(n + 9):nth-child(even):nth-child(-n + 16),
.board-sqr:nth-child(n + 17):nth-child(odd):nth-child(-n + 24),
.board-sqr:nth-child(n + 25):nth-child(even):nth-child(-n + 32),
.board-sqr:nth-child(n + 33):nth-child(odd):nth-child(-n + 40),
.board-sqr:nth-child(n + 41):nth-child(even):nth-child(-n + 48),
.board-sqr:nth-child(n + 49):nth-child(odd):nth-child(-n + 56),
.board-sqr:nth-child(n + 57):nth-child(even):nth-child(-n + 64) {
  background: white;
}

.board-sqr:nth-child(n + 2):nth-child(even):nth-child(-n + 8),
.board-sqr:nth-child(n + 9):nth-child(odd):nth-child(-n + 16),
.board-sqr:nth-child(n + 17):nth-child(even):nth-child(-n + 24),
.board-sqr:nth-child(n + 25):nth-child(odd):nth-child(-n + 32),
.board-sqr:nth-child(n + 33):nth-child(even):nth-child(-n + 40),
.board-sqr:nth-child(n + 41):nth-child(odd):nth-child(-n + 48),
.board-sqr:nth-child(n + 49):nth-child(even):nth-child(-n + 56),
.board-sqr:nth-child(n + 57):nth-child(odd):nth-child(-n + 64) {
  background: black;
  color: white;
}

Sample Image

In the code, I've used the psuedo classes in chain to control the start and end of their selection.

.board-sqr:nth-child(n + 1):nth-child(odd):nth-child(-n + 8)

This basically says select every odd element between 1 and 8.

CSS / HTML gradient fill pattern is glitchy in Firefox

Rotating gradients have always had that problem for more on that check this question

One way to fix the issue is to not use angles at all, and make use of repeating gradients.

html {  height: 100%;  background:   repeating-linear-gradient(90deg, #fff 0px 10px, transparent 10px 20px),   repeating-linear-gradient(0deg, #000 0px 10px, #fff 10px 20px);  background-blend-mode: difference;}

CSS 5-square background pattern

While @haxxxton went above board with his answer and I commend it, I ultimately figured out how to do this with CSS only.

It matches the sample background pattern exactly and is easy to change the color.

Here is what I came up with:

.background {
  background-color: white; 
  background-image: 
    repeating-linear-gradient(-45deg, transparent, transparent 33%, red 0%, red 50%),
    repeating-linear-gradient(-45deg, transparent, transparent 33%, white 0%, white 50%),  
    repeating-linear-gradient(-45deg, transparent, transparent 33%, white 0%, white 50%),  
    repeating-linear-gradient(45deg, transparent, transparent 33%, red 0%, red 50%); 
  background-size: 4px 4px;
  background-position: -1px, 2px, 1px 1px;
}

CSS Gradient Checkerboard Pattern