<h2>Creating Checkerboards Using Conic Gradients</h2>
<div class="container">
  <p>Supported Browsers</p>
  <div class="checker"></div>
</div>

<div class="container">
  <p>Reference Image</p>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/checker-board.png"/>
</div>

body {
  font-family: 'Raleway';
  width: 720px;
  text-align: center;
}

p {
  margin: 10px;
  width: 312px;
  text-align: center;
}

img {
  width: 310px;
  height: 310px;
  margin: 6px;
}

.container {
  float: left;
  display: inline-block;
  margin: 10px;
}

.checker {
  width: 300px;
  height: 300px;
  background: repeating-conic-gradient(#fbe462 0% 25%, #fd9c2a 25% 50%);
  background-size: 100px 100px;
  margin: 10px;
  display: inline-block;
}