Fix Color Banding In Gradient Background Using Noisy-Gradient Library

Preview:

Description:

Noisy-Gradient is a JavaScript library created to fix the color banding by adding noise to the gradient background using WebGL.

With a fallback to <canvas> when the browser doesn’t support WebGL.

How to use it:

Place the main JavaScript at the end of the HTML document.

<script src=js-noisy-gradient.js></script>

Generate a gradient image.

var stops = [ '#112233', '#223344' ];
var opts = { };
// NoisyVerticalGradient(width, height, stops, opts)
var png = (new NoisyVerticalGradient(400, 600, stops, opts)).render_png();

Apply the gradient image as a background to the target container.

<div id="example"></div>

var div = document.getElementById('r');
div.style.backgroundImage = png;

Use <canvas> fallback.

var opts = {
    canvas_fallback: true
};

More possible options to customize the noise.

var opts = {
    cover: 1.0, 
    white: 0.015, 
    black: 0.030
};