CSS3 linear gradient banding

Question

I have tried creating gradient color changing banner like the one on this site but have seemed to run into serious issues with color banding. Can anyone tell me if the color changing effect on this site is possible without using the canvas element?

Sorry I'm new to this.

Any feedback is appreciated.

This fiddle must be run in Firefox. Sorry for that.

#solid {
  position: absolute;
  width: 100%;
  height: 380px;
  background: -webkit-linear-gradient(top left, rgb(105, 80, 102), #2E8ECE);
  background: -o-linear-gradient(top left, rgb(105, 80, 102), #2E8ECE);
  background: linear-gradient(to bottom right, rgb(105, 80, 102), #2E8ECE);
}

Fiddle

Answer 1

You can do it using linear-gradient background image and JavaScript like in the below snippet. All that is required is to constantly keep changing the rgb() color values of the gradient by using the JS setInterval method.

Note: The coding is done such that after the rgb() values reach a certain threshold they go back to their original state immediately. You can also modify the code such that it increments till a certain level is reached and then decrements so that it kind of oscillates between a high and a low threshold.

 var el = document.querySelector('.gradient-div'); /* Set the initial rgb() color values for the start and end colors */ var startColorRed = 62, startColorGreen = 79, startColorBlue = 216, endColorRed = 251, endColorGreen = 38, endColorBlue = 103; /* set the original gradient as the element's background image */ el.style.backgroundImage = 'linear-gradient(90deg, rgb(' + startColorRed + ', ' + startColorGreen + ', ' + startColorBlue + ') 10% , rgb(' + endColorRed + ', ' + endColorGreen + ', ' + endColorBlue + ') 90%)'; /* function to change the gradient's colors */ function changeGrad() { /* do whatever math operation that is required on the rgb values of the color */ if (endColorRed >= 151) endColorRed--; else endColorRed = 251; if (startColorBlue >= 116) startColorBlue--; else startColorBlue = 216; if (endColorBlue <= 203) endColorBlue++; else endColorBlue = 103; if (startColorGreen <= 179) startColorGreen++; else startColorGreen = 79; if (endColorGreen <= 138) endColorGreen++; else endColorGreen = 38; el.style.backgroundImage = 'linear-gradient(90deg, rgb(' + startColorRed + ', ' + startColorGreen + ', ' + startColorBlue + ') 10% , rgb(' + endColorRed + ', ' + endColorGreen + ', ' + endColorBlue + ') 90%)'; } /* Call the changeGrad function at regular intervals to change the gradient's colors */ window.setInterval(changeGrad, 500); 

 div { height: 200px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class='gradient-div'></div>