diff --git a/demo/index.html b/demo/index.html
index c35af0b..8e7b92e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -146,6 +146,38 @@
           mixin(--paper-font-display1);
         }
 
+        .shadow {
+          display: inline-block;
+          padding: 8px;
+          margin: 16px;
+          height: 50px;
+          width: 50px;
+        }
+
+        .shadow-2dp {
+          mixin(--shadow-elevation-2dp);
+        }
+
+        .shadow-3dp {
+          mixin(--shadow-elevation-3dp);
+        }
+
+        .shadow-4dp {
+          mixin(--shadow-elevation-4dp);
+        }
+
+        .shadow-6dp {
+          mixin(--shadow-elevation-6dp);
+        }
+
+        .shadow-8dp {
+          mixin(--shadow-elevation-8dp);
+        }
+
+        .shadow-16dp {
+          mixin(--shadow-elevation-16dp);
+        }
+
       </style>
 
       <template>
@@ -231,12 +263,21 @@ <h4>body1</h4>
           </section>
         </section>
 
+        <section id="shadow">
+          <h2>shadow.html</h2>
+          <div class="shadow shadow-2dp">2dp</div>
+          <div class="shadow shadow-3dp">3dp</div>
+          <div class="shadow shadow-4dp">4dp</div>
+          <div class="shadow shadow-6dp">6dp</div>
+          <div class="shadow shadow-8dp">8dp</div>
+          <div class="shadow shadow-16dp">16dp</div>
+        </section>
+
       </template>
     </dom-module>
 
     <script>
       document.addEventListener('HTMLImportsLoaded', function() {
-        console.log('asdasd');
         Polymer({
           is: 'x-demo',
           enableCustomStyleProperties: true
diff --git a/paper-styles.html b/paper-styles.html
index 828fffe..4a4271f 100644
--- a/paper-styles.html
+++ b/paper-styles.html
@@ -11,5 +11,6 @@
 <link rel="import" href="color.html">
 <link rel="import" href="default-theme.html">
 <link rel="import" href="layout.html">
+<link rel="import" href="shadow.html">
 <link rel="import" href="typography.html">
 <link rel="import" href="shadow.html">
diff --git a/shadow.html b/shadow.html
index 6d7ae7a..12e48dd 100644
--- a/shadow.html
+++ b/shadow.html
@@ -12,34 +12,49 @@
 
 <style is="x-style">
 
+
   * {
 
     --shadow-transition: {
       transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     };
 
-    --shadow-elevation-1: {
-      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+    /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
+
+    --shadow-elevation-2dp: {
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                  0 1px 5px 0 rgba(0, 0, 0, 0.12),
+                  0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    };
+
+    --shadow-elevation-3dp: {
+      box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+                  0 1px 8px 0 rgba(0, 0, 0, 0.12),
+                  0 3px 3px -2px rgba(0, 0, 0, 0.2);
     };
 
-    --shadow-elevation-2: {
-      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2),
-                  0 6px 10px 0 rgba(0, 0, 0, 0.3);
+    --shadow-elevation-4dp: {
+      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+                  0 1px 10px 0 rgba(0, 0, 0, 0.12),
+                  0 2px 4px -1px rgba(0, 0, 0, 0.2);
     };
 
-    --shadow-elevation-3: {
-      box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19),
-                  0 13px 25px 0 rgba(0, 0, 0, 0.3);
+    --shadow-elevation-6dp: {
+      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
+                  0 1px 18px 0 rgba(0, 0, 0, 0.12),
+                  0 3px 5px -1px rgba(0, 0, 0, 0.2);
     };
 
-    --shadow-elevation-4: {
-      box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17),
-                  0 20px 40px 0 rgba(0, 0, 0, 0.3);
+    --shadow-elevation-8dp: {
+      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                  0 3px 14px 2px rgba(0, 0, 0, 0.12),
+                  0 5px 5px -3px rgba(0, 0, 0, 0.2);
     };
 
-    --shadow-elevation-5: {
-      box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15),
-                  0 27px 55px 0 rgba(0, 0, 0, 0.3);
+    --shadow-elevation-16dp: {
+      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+                  0  6px 30px 5px rgba(0, 0, 0, 0.12),
+                  0  8px 10px -5px rgba(0, 0, 0, 0.2);
     };
 
   }