CSS 4 color checkers background

Issue

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

Solution

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 By - Zohini