JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<span class="original"></span>
<span class="new"></span>

<span class="hover-original"></span>
<span class="hover-new"></span>

CSS

span {
    float: left;
    width: 20px;
    height: 200px;
}
span.original {
    background: -webkit-linear-gradient(top, #198b75, #116152);
}

span.hover-original {
    margin-left: 1px;
    background: -webkit-linear-gradient(top, #2DA58F, #29C7A9);
}

JavaScript

function shadeColor(color, percent) {

    var R = parseInt(color.substring(1,3),16)
    var G = parseInt(color.substring(3,5),16)
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;  
    G = (G<255)?G:255;  
    B = (B<255)?B:255;  

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
}

var topColor = '#198b75',    	    	    	// Top of the bar
bottomColor = shadeColor(topColor, -30),    	// Bottom of the bar
hoverTopColor = shadeColor(topColor, 20);    	// Top of the bar when hovering
hoverBottomColor = shadeColor(topColor, 45);    // Bottom of the bar when hovering

$('span.new').css('background', '-webkit-linear-gradient(top, ' + topColor + ', ' + bottomColor + ')');

$('span.hover-new').css('background', '-webkit-linear-gradient(top, ' + hoverTopColor + ', ' + hoverBottomColor + ')');