diff --git a/src/client/graphics/layers/RailroadLayer.ts b/src/client/graphics/layers/RailroadLayer.ts
index fd5782738..ee44db960 100644
--- a/src/client/graphics/layers/RailroadLayer.ts
+++ b/src/client/graphics/layers/RailroadLayer.ts
@@ -96,11 +96,15 @@ export class RailroadLayer implements Layer {
 
   renderLayer(context: CanvasRenderingContext2D) {
     this.updateRailColors();
-    if (this.transformHandler.scale <= 2) {
-      // When zoomed out, don't show the railroads
-      // to prevent map clutter.
+    const scale = this.transformHandler.scale;
+    if (scale <= 1) {
       return;
     }
+    const rawAlpha = (scale - 1) / (2 - 1); // maps 1->0, 2->1
+    const alpha = Math.max(0, Math.min(1, rawAlpha));
+
+    context.save();
+    context.globalAlpha = alpha;
     context.drawImage(
       this.canvas,
       -this.game.width() / 2,
@@ -108,14 +112,11 @@ export class RailroadLayer implements Layer {
       this.game.width(),
       this.game.height(),
     );
+    context.restore();
   }
 
   private handleRailroadRendering(railUpdate: RailroadUpdate) {
     for (const railRoad of railUpdate.railTiles) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const x = this.game.x(railRoad.tile);
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const y = this.game.y(railRoad.tile);
       if (railUpdate.isActive) {
         this.paintRailroad(railRoad);
       } else {