I’m trying to have the background colors of three stacks of divs melt into each other on both a horizontal and vertical level. I’ve managed to make it work for the horizontal boxes using linear-gradient, but as you can see below there is an obvious separating line between the vertical rows. Is there a way to make the boxes transition into the ones below them as well? I’m using pure css on this, perhaps there is another (better) way?

My CSS:

#canvas {
 width: 100%;
 display: block;
 clear: both;
 margin: 0 0 1em;
}

.row {
 width: 100%;
}

.cell {
 width: 10%;
 height: 5em;
 float: left;
}

.clear {
 clear: both;
}

#box_0x0 {
 background: linear-gradient(to right,rgb(223,207,40),rgb(208,115,69));
}
#box_0x1 {
 background: linear-gradient(to right,rgb(208,115,69),rgb(105,166,166));
}

#box_1x0 {
 background: linear-gradient(to right,rgb(75,204,178),rgb(245,255,71));
}
#box_1x1 {
 background: linear-gradient(to right,rgb(245,255,71),rgb(67,102,113));
}

#box_2x0 {
 background: linear-gradient(to right,rgb(185,28,75),rgb(204,114,21));
}
#box_2x1 {
 background: linear-gradient(to right,rgb(204,114,21),rgb(238,156,125));
}

My html:

<div id="canvas">
  <div class="row">
    <div class="cell box_0x0" id="box_0x0"></div>
    <div class="cell box_0x1" id="box_0x1"></div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="cell box_1x0" id="box_1x0"></div>
    <div class="cell box_1x1" id="box_1x1"></div>
    <div class="clear"></div>
  </div>
  <div class="row">
    <div class="cell box_2x0" id="box_2x0"></div>
    <div class="cell box_2x1" id="box_2x1"></div>
    <div class="clear"></div>
  </div>
</div>