Lerp Color 3. Using p5.js library.

lerp-color-3.js

var b1, b2;
function setup() {
  createCanvas(1024, 576);
}

function draw() {
  background(255);
  from = color('rgba(255,0,0,0.3)');
  to   = color('rgba(0,0,255,0.3)');
  c1 = lerpColor(from, to, 0.20);
  c2 = lerpColor(from, to, 0.40);
  c3 = lerpColor(from, to, 0.60);
  c4 = lerpColor(from, to, 0.80);
  b1 = color('rgb(0,0,255)');
  b2 = color('rgb(255,0,0)');
  setGradient(0, 0, width, height, b1, b2);
  for (var k=0; k<10; k++) {
    stroke(0,80);
    fill(from);
    quad(random(-50, 221), random(height), random(-50, 221), random(height),
         random(-50, 221), random(height), random(-50, 221), random(height));
    fill(c1);
    quad(random(121, 391), random(height), random(121, 391), random(height),
         random(121, 391), random(height), random(121, 391), random(height));
    fill(c2);
    quad(random(291, 562), random(height), random(291, 562), random(height),
         random(291, 562), random(height), random(291, 562), random(height));
    fill(c3);
    quad(random(462, 733), random(height), random(462, 733), random(height),
         random(462, 733), random(height), random(462, 733), random(height));
    fill(c4);
    quad(random(632, 903), random(height), random(632, 903), random(height),
         random(632, 903), random(height), random(632, 903), random(height));
    fill(to);
    quad(random(803, 1074), random(height), random(803, 1074), random(height),
         random(803, 1074), random(height), random(803, 1074), random(height));
  }
  frameRate(5);
}

function setGradient(x, y, w, h, b1, b2, axis) {
  noFill();
  for (var i=x; i<=x+w; i++) {
    var inter = map(i, x, x+w, 0, 1);
    var j = lerpColor(b1, b2, inter);
    stroke(j);
    line(i, y, i, y+h);
  }
}