diff --git a/assets/index.html b/assets/index.html
index 79b2835..b50965f 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -111,15 +111,15 @@
         }
     }
 
-    function drawTile(wx, wy, h, water, hRight, hBack) {
+    function drawTile(wx, wy, h, water, hRight, hBack, inShadow) {
         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);
 
-        var topColor = '#33aa33';
-        var leftColor = '#6b4423';
-        var rightColor = '#4a2e18';
+        var topColor = inShadow ? '#3a5a3a' : '#5a8a5a';
+        var leftColor = inShadow ? '#4a3020' : '#6b4423';
+        var rightColor = inShadow ? '#352010' : '#4a2e18';
 
         ctx.fillStyle = topColor;
         ctx.beginPath();
@@ -183,7 +183,16 @@
                 } else {
                     hBack = level;
                 }
-                drawTile(wx, wy, level, true, hRight, hBack);
+
+                var inShadow = false;
+                var sunDirX = wx + TILE;
+                var sunDirY = wy - TILE;
+                var sunH = heightMap[sunDirX + ',' + sunDirY] || 0;
+                if (sunH >= level) {
+                    inShadow = true;
+                }
+
+                drawTile(wx, wy, level, true, hRight, hBack, inShadow);
             }
         }
     }