CodePen

HTML

            
              <body onload="drawGradient()" onchange="drawGradient()">
<p>Midpoint: <input type="number" id="midPoint" min="5" max="95" value="50"></p>

<p>Color 1: <input type="color" id="c1"  value="#ff0000"></p>
<p>Color 2: <input type="color" id="c2"  value="#0000ff"></p>

<canvas id="c"></canvas>
<p id="formula"></p>
</body>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function getRgb(c){
    c= c.toLowerCase();
    if (/^[a-z]+$/.test(c)){
        var colornames={
            aqua:'#00ffff', black:'#000000', blue:'#0000ff', fuchsia:'#ff00ff',
            gray:'#808080', green:'#008000', lime:'#00ff00', maroon:'#800000',
            navy:'#000080', olive:'#808000', orange:'#ffa500', purple:'#800080',
            red:'#ff0000', silver:'#c0c0c0', teal:'#008080', white:'#ffffff',
            yellow:'#ffff00'
        }
        c= colornames[c];
    }
    if(/^#([a-f0-9]{3}){1,2}$/.test(c)){
        if(c.length== 4){
            c= '#'+[c[1], c[1], c[2], c[2], c[3], c[3]].join('');
        }
        c= '0x'+c.substring(1);
        return [(c>>16)&255, (c>>8)&255, c&255];
    }
    else if(c.indexOf('rgb')== 0){
        c= c.match(/\d+(\.\d+)?%?/g);
        if(c){
            for(var i= 0;i<3;i++){
                if(c[i].indexOf('%')!= -1){
                         c[i]= Math.round(parseFloat(c[i])*2.55);
                    }
                if(c[i]<0) c[i]= 0;
                if(c[i]>255) c[i]= 255;
            }
            return c;
        }
    }
}

function drawGradient(){
  var ctx = document.getElementById('c').getContext('2d');
  var mid = document.getElementById('midPoint').valueAsNumber;
  var c1 = getRgb(document.getElementById('c1').value);
  var c2 = getRgb(document.getElementById('c2').value);
  var exp = Math.log(.5)/Math.log(mid/100);
  

  for(x = 0; x < 256; x++) {
  	var s = "rgb(";
  	s += Math.floor(c1[0] + Math.pow(x/255, exp)*(c2[0]-c1[0])) + ",";
  	s += Math.floor(c1[1] + Math.pow(x/255, exp)*(c2[1]-c1[1])) + ",";
  	s += Math.floor(c1[2] + Math.pow(x/255, exp)*(c2[2]-c1[2])) + ")";

	ctx.fillStyle = s;
	ctx.fillRect(x/256*ctx.canvas.width, 0, ctx.canvas.width, ctx.canvas.height);
  }
  
  var s = "gradient formula: c = c1 + (c2 - c1)^(log(.5)/log(" + mid + "/100)";
  s += " = c1 + (c2 - c1)^" + exp;
  
  $("#formula").text(s);
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................