diff --git a/assets/index.html b/assets/index.html
index 13fad04..d4ba64f 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -170,11 +170,6 @@
 
             var water = isWater(h);
 
-            var sunX = wx + TILE;
-            var sunY = wy - TILE;
-            var sunH = heightMap[sunX + ',' + sunY] || 0;
-            var isInShadow = (sunH >= h);
-
             for (var level = 1; level <= h; level++) {
                 var hRight;
                 if (level > (heightMap[(wx + TILE) + ',' + wy] || 0)) {
@@ -192,20 +187,45 @@
                 drawTile(wx, wy, level, true, hRight, hBack, false);
             }
 
-            if (isInShadow && h > 0) {
-                var top1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
-                var top2 = project(wx + TILE - GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
-                var top3 = project(wx + TILE - GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
-                var top4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
+            if (h > 0) {
+                var shadowFront = (heightMap[(wx + TILE) + ',' + wy] || 0) - h;
+                var shadowLeft = (heightMap[wx + ',' + (wy - TILE)] || 0) - h;
 
-                ctx.fillStyle = 'rgba(0, 0, 0, 0.35)';
-                ctx.beginPath();
-                ctx.moveTo(top1[0], top1[1]);
-                ctx.lineTo(top2[0], top2[1]);
-                ctx.lineTo(top3[0], top3[1]);
-                ctx.lineTo(top4[0], top4[1]);
-                ctx.closePath();
-                ctx.fill();
+                if (shadowFront > 0) {
+                    var shadowWidth = Math.min(shadowFront * 2, TILE);
+                    var t = shadowWidth / TILE;
+                    var top1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
+                    var top2 = project(wx + TILE - GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
+                    var topA = project(wx + GAP/2 + (TILE - GAP) * t, wy + TILE - GAP/2, h * HEIGHT_UNIT);
+                    var topB = project(wx + TILE - GAP/2 - (TILE - GAP) * t, wy + TILE - GAP/2, h * HEIGHT_UNIT);
+
+                    ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+                    ctx.beginPath();
+                    ctx.moveTo(top1[0], top1[1]);
+                    ctx.lineTo(topA[0], topA[1]);
+                    ctx.lineTo(topB[0], topB[1]);
+                    ctx.lineTo(top2[0], top2[1]);
+                    ctx.closePath();
+                    ctx.fill();
+                }
+
+                if (shadowLeft > 0) {
+                    var shadowWidth = Math.min(shadowLeft * 2, TILE);
+                    var t = shadowWidth / TILE;
+                    var top4 = project(wx + GAP/2, wy + GAP/2, h * HEIGHT_UNIT);
+                    var top1 = project(wx + GAP/2, wy + TILE - GAP/2, h * HEIGHT_UNIT);
+                    var topA = project(wx + GAP/2, wy + GAP/2 + (TILE - GAP) * t, h * HEIGHT_UNIT);
+                    var topB = project(wx + GAP/2, wy + TILE - GAP/2 - (TILE - GAP) * t, h * HEIGHT_UNIT);
+
+                    ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+                    ctx.beginPath();
+                    ctx.moveTo(top4[0], top4[1]);
+                    ctx.lineTo(topA[0], topA[1]);
+                    ctx.lineTo(topB[0], topB[1]);
+                    ctx.lineTo(top1[0], top1[1]);
+                    ctx.closePath();
+                    ctx.fill();
+                }
             }
         }
     }