diff --git a/paper-toast.html b/paper-toast.html
index 5a7d705..32392ba 100644
--- a/paper-toast.html
+++ b/paper-toast.html
@@ -83,9 +83,17 @@
         -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
         transition: transform 0.3s, opacity 0.3s;
         opacity: 0;
+        @apply(--paper-font-common-base);
+      }
+
+      :host(.vertical-align-bottom) {
         -webkit-transform: translateY(100px);
         transform: translateY(100px);
-        @apply(--paper-font-common-base);
+      }
+
+      :host(.vertical-align-top) {
+        -webkit-transform: translateY(-100px);
+        transform: translateY(-100px);
       }
 
       :host(.capsule) {
@@ -150,7 +158,8 @@
            */
           verticalAlign: {
             type: String,
-            value: 'bottom'
+            value: 'bottom',
+            observer: '_verticalAlign'
           },
 
           /**
@@ -218,6 +227,11 @@
           Polymer.IronA11yAnnouncer.requestAvailability();
         },
 
+        // Setup the correct translateY based on vertical alignmnet
+        _verticalAlign: function(verticalAlign) {
+          this.classList.add('vertical-align-' + verticalAlign)
+        },
+
         /**
          * Show the toast. Without arguments, this is the same as `open()` from `IronOverlayBehavior`.
          * @param {(Object|string)=} properties Properties to be set before opening the toast.