CSS 4 color checkers background

Question

I am trying to create 4 color checker background using linear gradient but not sure how can I fill the entire background with the checker. Here is the current implementation:

Code

.tab-content {
  width: 500px;
  height: 500px;
  background-image: linear-gradient(to right, red 50%, blue 50%), linear-gradient(to right, green 50%, yellow 50%);
  background-size: 20px 10px;
  background-position: 0 0, 0 10px;
  background-repeat: no-repeat;
}

<div class="tab-content"></div>

Also attaching the current implementation. Current implementation of checker background

Do you want 4 squares total? Or for that pattern to repeat? (Either your `background-repeat` or your `background-size` is incorrect) — DBS, Aug 01 '22 at 13:57
I want the pattern to repeat across the whole background. I have tried, background-repeat: repeat, repeat — Sadhna Shukla, Aug 01 '22 at 13:59
I guess, the author has already tried, background-repeat property. A fixed implementation is what they are looking for. — Abhay Srivastav, Aug 01 '22 at 14:03
using conic-gradient `background: conic-gradient(blue 25%, yellow 0 50%, green 0 75%, red 0) 0 0/20px 20px;` although IE doesn't support it — Rainbow, Aug 01 '22 at 14:03
@Zohini Thanks it works perfectly. Is it not possible with multiple linear gradient ? — Sadhna Shukla, Aug 01 '22 at 14:06
from the duplicate: https://stackoverflow.com/a/65129916/8620333 and follow the link there to understand how conic-gradient works — Temani Afif, Aug 01 '22 at 14:24
I'm not sure about `linear-gradient` having four colors repeat is problematic, since position is sort of ignored, one of the colors will be stepped over, with conic, you basically define four colors in a single image, and have the whole thing repeat, which is far too simpler. — Rainbow, Aug 01 '22 at 14:39

score 1 · Accepted Answer · answered Aug 01 '22 at 14:36

1

Can be done using conic-gradient although IE doesn't support it

body {
  background: conic-gradient(blue 25%, yellow 0 50%, green 0 75%, red 0) 0 0/20px 20px;
}

answered Aug 01 '22 at 14:36

Rainbow

6,772
3
11
28

CSS 4 color checkers background

1 Answers1