How to insert a gradient layer between the base map and a route layer in the same canvas

[binaryAustin]

The UI/UX team proposes a design like this. As you can see, there's a gradient layer covering around the map.

I've been experimenting with these 2 methods:

Method 1

<Map>
  <Source id="route_source" type="geojson" data={geoJSON}>
    <Layer
        id="route_layer"
        type="line"
        source="route_source"
        layout={layerLayout}
        paint={layerPaint} 
    />
  </Source>
</Map>

Obviously, the route layer is rendered in the same canvas with the base map so it does not work for my design.

I also tried with a background layer but it only supports a solid color, not gradient ones.

Method 2

export default function RouteOverlay({
  points,
  color = "blue",
  lineWidth = 4,
}: RouteOverlayProps) {
  const redraw = useCallback(
    ({ ctx, width, height, project }: RedrawParams) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";

      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = color;

      ctx.beginPath();
      points.forEach((point) => {
        const pixel = project([point[0], point[1]]);
        ctx.lineTo(pixel[0], pixel[1]);
      });
      ctx.stroke();
    },
    []
  );

  return <CanvasOverlay redraw={redraw} />;
}

This kinda works, except one big issue: The route is inaccurate (as the result of being rendered in a separate canvas from the base map).

Any suggestion would be appreciated.