JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="200px" height="800"></canvas>

JavaScript

function fade() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var gradient = canvas.getContext("2d").createLinearGradient(0, 0, 1, 500);

    gradient.addColorStop(0, 'gray');
    gradient.addColorStop(0.5, 'red');
    gradient.addColorStop(1.0, 'gray');

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 200, 800);
}

fade();