Teamur,
градиент так градиент
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#box{
padding:50px;
background:#228B22;
position:relative;
text-align:center;
}
.el{
border-radius:4px;
display:inline-block;
font-size:20px;
margin:3px;
padding:3px;
background:#FFF;
transition:all .2s ease-in-out;
cursor:pointer;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function d(a, e) {
for (var b = e ? [255, 0, 255, .8] : [255, 255, 255, 1], f = e ? [184, 219, 255, 1] : b, d = a.length, g = 0; g < d; g++) {
for (var h = [], l = b.length, c = 0; c < l; c++) h[c] = g / (d - 1) * (f[c] - b[c]) + b[c], 3 > c && (h[c] = Math.round(h[c]));
!g && (h = b);
a[g].style.backgroundColor = "rgba(" + h + ")"
}
return a
}
var f = [].slice.call(document.querySelectorAll(".el")),
a = void 0;
f.forEach(function(k, e) {
k.addEventListener("mouseover", function() {
if (void 0 !== a) {
var b = Math.min(e, a),
k = Math.max(e, a);
d(f);
b = f.slice(b, k + 1);
a > e && b.reverse();
d(b, !0)
}
});
k.addEventListener("click", function() {
void 0 === a ? (a = e, d(f), d([f[a]], !0)) : a === e ? (d(f), a = void 0) : a = void 0
})
})
});
</script>
</head>
<body>
<div id='box'>
<div class="el">01</div>
<div class="el">02</div>
<div class="el">03</div>
<div class="el">04</div>
<div class="el">05</div>
<div class="el">06</div>
<div class="el">07</div>
<div class="el">08</div>
<div class="el">09</div>
<div class="el">10</div>
<div class="el">11</div>
<div class="el">12</div>
<div class="el">13</div>
<div class="el">14</div>
<div class="el">15</div>
<div class="el">16</div>
<div class="el">17</div>
<div class="el">18</div>
<div class="el">19</div>
<div class="el">20</div>
<div class="el">21</div>
<div class="el">22</div>
<div class="el">23</div>
<div class="el">24</div>
<div class="el">25</div>
<div class="el">26</div>
<div class="el">27</div>
<div class="el">28</div>
<div class="el">29</div>
<div class="el">30</div>
<div class="el">31</div>
<div class="el">32</div>
<div class="el">33</div>
<div class="el">34</div>
<div class="el">35</div>
<div class="el">36</div>
<div class="el">37</div>
<div class="el">38</div>
<div class="el">39</div>
<div class="el">40</div>
<div class="el">41</div>
<div class="el">42</div>
<div class="el">43</div>
<div class="el">44</div>
<div class="el">45</div>
</div>
</body>
</html>