diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
index d29858e..e208148 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -141,7 +141,7 @@
       }
       .dropdown-content {
         background-color: var(--view-background-color);
-        box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
+        box-shadow: var(--elevation-level-2);
       }
       /*
        * We are not using :host to do this, because :host has a lowest css priority
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 92c2c37..fe64a1b 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -73,7 +73,7 @@
         text-align: center;
       }
       .image-diff img {
-        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+        box-shadow: var(--elevation-level-1);
         max-width: 50em;
       }
       .image-diff .right.lineNum {
diff --git a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
index b0018df..0d44164 100644
--- a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
+++ b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
@@ -32,7 +32,7 @@
         background-color: var(--tooltip-background-color);
         bottom: 1.25rem;
         border-radius: var(--border-radius);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+        box-shadow: var(--elevation-level-2);
         color: var(--view-background-color);
         left: 1.25rem;
         position: fixed;
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
index cf32e28..c12aa72 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
@@ -59,7 +59,7 @@
       }
       .dropdown-content {
         background: var(--dropdown-background-color);
-        box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+        box-shadow: var(--elevation-level-2);
         border-radius: var(--border-radius);
         max-height: 50vh;
         overflow: auto;
diff --git a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html
index d0a07b6..cce1d19 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html
+++ b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html
@@ -47,7 +47,7 @@
         display: block;
         margin: 0 4px 4px 4px;
         white-space: normal;
-        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+        box-shadow: var(--elevation-level-2);
         border-radius: var(--border-radius);
         /** This is required for firefox to continue the inheritance */
         -webkit-user-select: inherit;
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
index 7fffcff..ee9e7a0 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
@@ -44,7 +44,7 @@
       }
       .dropdown-content {
         background-color: var(--dropdown-background-color);
-        box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
+        box-shadow: var(--elevation-level-2);
         max-height: 70vh;
         margin-top: var(--spacing-xxl);
         min-width: 266px;
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
index d76721f..5d28390 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
@@ -37,7 +37,7 @@
       }
       .dropdown-content {
         background-color: var(--dropdown-background-color);
-        box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
+        box-shadow: var(--elevation-level-2);
       }
       gr-button {
         @apply --gr-button;
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
index 950be2a..69c280b 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
@@ -33,8 +33,9 @@
       }
       .viewer {
         background-color: var(--view-background-color);
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--view-background-color);
         border-radius: var(--border-radius);
+        box-shadow: var(--elevation-level-1);
         padding: var(--spacing-m);
       }
       .editor iron-autogrow-textarea {
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
index 78465e1..917e4b6 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -50,7 +50,7 @@
         cursor: pointer;
       }
       #dropdown {
-        box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+        box-shadow: var(--elevation-level-2);
       }
       .inputContainer {
         background-color: var(--dialog-background-color);
diff --git a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html
index 226092f..14285b4 100644
--- a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html
+++ b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.html
@@ -41,7 +41,7 @@
       }
       .fixedAtTop {
         border-bottom: 1px solid #a4a4a4;
-        box-shadow: 0 4px 4px rgba(0,0,0,0.1);
+        box-shadow: var(--elevation-level-2);
       }
     </style>
     <header id="header" class$="[[_computeHeaderClass(_headerFloating, _topLast)]]">
diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html
index c77ea81..fcc04ba 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard.html
@@ -36,7 +36,7 @@
       }
       #hovercard {
         background: var(--dialog-background-color);
-        box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+        box-shadow: var(--elevation-level-2);
         padding: var(--spacing-l);
       }
     </style>
diff --git a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
index 46b8fb6..1afd1c9 100644
--- a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
+++ b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
@@ -26,9 +26,7 @@
       :host {
         background: var(--dialog-background-color);
         border-radius: var(--border-radius);
-        box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),
-                    0 24px 38px  3px rgba(0,0,0,.14),
-                    0  9px 46px  8px rgba(0,0,0,.12);
+        box-shadow: var(--elevation-level-5);
       }
 
       @media screen and (max-width: 50em) {
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
index 75d9c4b..d78d554 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
@@ -26,7 +26,7 @@
         --gr-tooltip-arrow-center-offset: 0;
 
         background-color: var(--tooltip-background-color);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+        box-shadow: var(--elevation-level-2);
         color: var(--tooltip-text-color);
         font-size: var(--font-size-small);
         position: absolute;
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index 53827b5..369af2b 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -169,6 +169,13 @@
   --syntax-type-color: #2a66d9;
   --syntax-variable-color: var(--primary-text-color);
 
+  /* elevation */
+  --elevation-level-1: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 1px 3px 1px rgba(60, 64, 67, .15);
+  --elevation-level-2: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
+  --elevation-level-3: 0px 1px 3px 0px rgba(60, 64, 67, .30), 0px 4px 8px 3px rgba(60, 64, 67, .15);
+  --elevation-level-4: 0px 2px 3px 0px rgba(60, 64, 67, .30), 0px 6px 10px 4px rgba(60, 64, 67, .15);
+  --elevation-level-5: 0px 4px 4px 0px rgba(60, 64, 67, .30), 0px 8px 12px 6px rgba(60, 64, 67, .15);
+
   /* misc */
   --border-radius: 4px;
   --reply-overlay-z-index: 1000;