Create gradient tiles with Css, Html and Javascript

Question

How would I go about creating set of divs each having it's own background color, but the colors have to be in the gradient range between two given colors. I know how to create a regular gradient background on a div and that is not what I need. I need something like this.

It doesn't have to be CSS and HTML (thought that is ideal). If I need to use some javascript that is ok. Even if I have to use some PHP to accomplish this, that is okay with me.

Here is a visual demonstration of what I need: https://jsfiddle.net/1q6nrow9/

Each div should have it's own distinct color. Colors should not bleed through the border of each div.

Here is the sample of the code from fiddle:

This: no
<div class="gradient-wrapper"></div>

<div class="wrapper liquid">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>

This: yes
<div class="wrapper">
<!-- <div class="tile tile-01"></div> -->
<div class="tile tile-02"></div>
<!-- <div class="tile tile-03"></div> -->
<div class="tile tile-04"></div>
<!-- <div class="tile tile-05"></div> -->
<div class="tile tile-06"></div>
<!-- <div class="tile tile-07"></div> -->
<div class="tile tile-08"></div>
<!-- <div class="tile tile-09"></div> -->
<div class="tile tile-10"></div>
<!-- <div class="tile tile-11"></div> -->
<div class="tile tile-12"></div>
<!-- <div class="tile tile-13"></div> -->
<div class="tile tile-14"></div>
<!-- <div class="tile tile-15"></div> -->
<div class="tile tile-16"></div>
<!-- <div class="tile tile-17"></div> -->
<div class="tile tile-18"></div>
</div>

Some CSS:

body {
    padding: 50px;
}
.gradient-wrapper {
    width: 459px;
    height: 50px;
    border: 1px solid #333;
    margin-bottom: -52px;
    background: -moz-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,255,0,1)), color-stop(100%, rgba(255,0,0,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* ie10+ */
    background: linear-gradient(90deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 ); /* ie6-9 */ 
}
.liquid {
    margin-bottom: 50px;
}
.wrapper {
    width: 459px;
    height: 50px;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;

}
.tile {
    border-right: 1px solid #333;
    height: 50px;
    width: 50px;
    float: left;
}
.tile-01{background: #0DF200;}
.tile-02{background: #1BE400;}
.tile-03{background: #29D600;}
.tile-04{background: #38C700;}
.tile-05{background: #46B900;}
.tile-06{background: #54AB00;}
.tile-07{background: #629D00;}
.tile-08{background: #708F00;}
.tile-09{background: #7F8000;}
.tile-10{background: #8D7200;}
.tile-11{background: #9B6400;}
.tile-12{background: #A95600;}
.tile-13{background: #B74800;}
.tile-14{background: #C53A00;}
.tile-15{background: #D42B00;}
.tile-16{background: #E21D00;}
.tile-17{background: #F00F00;}
.tile-18{background: #FE0100;}

take a look at these answers: [Javascript color gradient](http://stackoverflow.com/questions/3080421/javascript-color-gradient) — Sagar, Dec 07 '16 at 00:01

score 1 · Accepted Answer · answered Dec 06 '16 at 23:58

This can be done with JavaScript. I've written up some JavaScript functions that use HSL to make a gradient. You can convert to and from HSL if you need to deal with other color spaces, but this should be a good jumping off point. The code snippet formatting is really screwed up. View the easier to parse fiddle here: https://jsfiddle.net/tu47tjb5/1/

function HSLColor(hue, sat, light) {
  this.hue = hue;
  this.saturation = sat;
  this.lightness = light;
  this.getCSS = function(){
   return "hsl("+this.hue+","+this.saturation+"%,"+this.lightness+"%)";
  }
}

function linearInterpolateColor(startColor, endColor, percentage)
{
 
  var hueDiff = (endColor.hue - startColor.hue) * percentage;
  var satDiff = (endColor.saturation - startColor.saturation) * percentage;
  var lightDiff = (endColor.lightness - startColor.lightness) * percentage;
  return new HSLColor(startColor.hue + hueDiff,startColor.saturation + satDiff, startColor.lightness + lightDiff);
}

function getInterpolationArray(startColor, endColor, steps)
{
 var interpolArray = [];
 for(var i = 0; i < steps; i++)
  {
   interpolArray.push(linearInterpolateColor(startColor, endColor, i/(steps-1)));
  }
  return interpolArray;
}

/**
 Container should be a jquery object
*/
function generateSteps(startColor, endColor, steps, container)
{
 var interpolArray = getInterpolationArray(startColor, endColor, steps)
 
  interpolArray.forEach(function(color){
   var colorBlock = $("<div>").addClass("colorBlock").css('background-color',color.getCSS());
    container.append(colorBlock);
  });
  
}

var start = new HSLColor(0, 100, 50);
var end = new HSLColor(40, 25, 100);
generateSteps(start, end, 10, $("#container"));

.colorBlock {
  width: 50px;
  height: 50px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

I find this very useful. Thank you! – GRowing Dec 07 '16 at 05:55 — GRowing, Dec 07 '16 at 05:55

Create gradient tiles with Css, Html and Javascript

1 Answers1