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>