diff --git a/assets/index.html b/assets/index.html
index d2b3af0..6890a46 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -164,6 +164,8 @@
             heightMap[t.x + ',' + t.y] = t.h;
         }
 
+        var shadows = [];
+
         for (var i = 0; i < tiles.length; i++) {
             var t = tiles[i];
             var wx = t.x, wy = t.y, h = t.h;
@@ -202,14 +204,16 @@
                     var topA = project(wx + GAP/2 + (TILE - GAP) * tt, wy + TILE - GAP/2, h * HEIGHT_UNIT);
                     var topB = project(wx + TILE - GAP/2 - (TILE - GAP) * tt, 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();
+                    shadows.push({
+                        x: wx, y: wy,
+                        points: [
+                            { x: top1[0], y: top1[1] },
+                            { x: topA[0], y: topA[1] },
+                            { x: topB[0], y: topB[1] },
+                            { x: top2[0], y: top2[1] }
+                        ],
+                        depth: (wx + wy) - 1
+                    });
                 }
 
                 if (shadowLeft > 0) {
@@ -220,17 +224,33 @@
                     var topA = project(wx + GAP/2, wy + GAP/2 + (TILE - GAP) * tt, h * HEIGHT_UNIT);
                     var topB = project(wx + GAP/2, wy + TILE - GAP/2 - (TILE - GAP) * tt, 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();
+                    shadows.push({
+                        x: wx, y: wy,
+                        points: [
+                            { x: top4[0], y: top4[1] },
+                            { x: topA[0], y: topA[1] },
+                            { x: topB[0], y: topB[1] },
+                            { x: top1[0], y: top1[1] }
+                        ],
+                        depth: (wx + wy) - 1
+                    });
                 }
             }
         }
+
+        shadows.sort(function(a, b) { return a.depth - b.depth; });
+
+        for (var i = 0; i < shadows.length; i++) {
+            var s = shadows[i];
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+            ctx.beginPath();
+            ctx.moveTo(s.points[0].x, s.points[0].y);
+            ctx.lineTo(s.points[1].x, s.points[1].y);
+            ctx.lineTo(s.points[2].x, s.points[2].y);
+            ctx.lineTo(s.points[3].x, s.points[3].y);
+            ctx.closePath();
+            ctx.fill();
+        }
     }
 
     function applyLighting(color, factor) {