diff --git a/webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.module.css b/webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.module.css
index 7ebb988287..0706e1e29c 100644
--- a/webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.module.css
+++ b/webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.module.css
@@ -10,12 +10,8 @@
 }
 
 .error {
-  composes: theme-background-surface theme-text-on-surface from global;
+  composes: theme-background-surface theme-text-on-surface theme-elevation-xlarge from global;
   border-radius: 0.25rem;
-  box-shadow:
-    0px 6px 6px -3px rgba(0, 0, 0, 0.2),
-    0px 10px 14px 1px rgba(0, 0, 0, 0.14),
-    0px 4px 18px 3px rgba(0, 0, 0, 0.12);
 }
 
 .backdrop {
diff --git a/webapp/packages/core-blocks/src/FormControls/BaseDropdown.module.css b/webapp/packages/core-blocks/src/FormControls/BaseDropdown.module.css
index 82e55ccedd..32fc3a8e49 100644
--- a/webapp/packages/core-blocks/src/FormControls/BaseDropdown.module.css
+++ b/webapp/packages/core-blocks/src/FormControls/BaseDropdown.module.css
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 .menu {
-  composes: theme-text-on-surface theme-background-surface theme-typography--caption from global;
+  composes: theme-text-on-surface theme-background-surface theme-typography--caption theme-elevation-small from global;
   display: flex;
   flex-direction: column;
   max-height: 300px;
@@ -14,10 +14,6 @@
   outline: none;
   z-index: 999;
   border-radius: var(--theme-form-element-radius);
-  box-shadow:
-    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
 }
 
 .menuItem {
diff --git a/webapp/packages/core-blocks/src/Menu/MenuPanel.module.css b/webapp/packages/core-blocks/src/Menu/MenuPanel.module.css
index 19a9fde75c..965ed79a25 100644
--- a/webapp/packages/core-blocks/src/Menu/MenuPanel.module.css
+++ b/webapp/packages/core-blocks/src/Menu/MenuPanel.module.css
@@ -10,17 +10,13 @@
   z-index: 999;
 }
 .menuBox {
-  composes: theme-background-surface theme-text-on-surface theme-group-element-radius theme-typography--body2 from global;
+  composes: theme-background-surface theme-text-on-surface theme-group-element-radius theme-typography--body2 theme-elevation-medium from global;
   composes: menuBox from './MenuItemElement.module.css';
 
   display: flex;
   flex-direction: column;
   min-width: 140px;
   padding: 6px 0;
-  box-shadow:
-    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
 
   & .menuBox {
     margin-top: -6px;
diff --git a/webapp/packages/core-blocks/src/Overlay/Overlay.module.css b/webapp/packages/core-blocks/src/Overlay/Overlay.module.css
index 14731f36e0..70c7b500de 100644
--- a/webapp/packages/core-blocks/src/Overlay/Overlay.module.css
+++ b/webapp/packages/core-blocks/src/Overlay/Overlay.module.css
@@ -6,45 +6,41 @@
  * you may not use this file except in compliance with the License.
  */
 .overlay {
-    composes: theme-text-on-primary from global;
-    display: none;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    overflow: auto;
-    position: absolute;
-    margin: auto;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.4);
-    box-shadow: none;
+  composes: theme-text-on-primary from global;
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  box-shadow: none;
 
-    &.active {
-        display: flex;
-    }
+  &.active {
+    display: flex;
+  }
 
-    &.fill {
-        background-color: var(--theme-background-surface);
-        & .box {
-            box-shadow: none;
-        }
+  &.fill {
+    background-color: var(--theme-background-surface);
+    & .box {
+      box-shadow: none;
     }
+  }
 }
 
 .box {
-    composes: theme-background-surface theme-text-on-surface from global;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    overflow: auto;
-    border-radius: 0.25rem;
-    align-items: normal;
-    max-width: calc(100% - 48px);
-    max-height: calc(100% - 48px);
-    box-shadow:
-      0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-      0px 6px 10px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  composes: theme-background-surface theme-text-on-surface theme-elevation-large from global;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: auto;
+  border-radius: 0.25rem;
+  align-items: normal;
+  max-width: calc(100% - 48px);
+  max-height: calc(100% - 48px);
 }
diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.module.css b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.module.css
index 42f84617c4..f48bb55a04 100644
--- a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.module.css
+++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.module.css
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 .notification {
-  composes: theme-background-surface theme-text-on-surface from global;
+  composes: theme-background-surface theme-text-on-surface theme-elevation-medium from global;
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -17,10 +17,6 @@
   line-height: 1.5;
   opacity: 0;
   border-radius: var(--theme-group-element-radius);
-  box-shadow:
-    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0px 5px 8px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 14px 0px rgba(0, 0, 0, 0.12);
   transition:
     opacity 0.3s ease-in-out,
     transform 0.5s ease-in-out;
diff --git a/webapp/packages/core-theming/src/styles/_elevation.scss b/webapp/packages/core-theming/src/styles/_elevation.scss
new file mode 100644
index 0000000000..9e054b153d
--- /dev/null
+++ b/webapp/packages/core-theming/src/styles/_elevation.scss
@@ -0,0 +1,31 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+/**
+ * Elevation Utilities
+ *
+ * Provides elevation shadow classes for composable styles.
+ * Currently used elevations: small (z3), medium (z5), large (z6), xlarge (z10)
+ */
+
+// Elevation shadow values from Material Design
+$elevation-shadows: (
+  small: (0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)),
+  medium: (0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)),
+  large: (0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)),
+  xlarge: (0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)),
+);
+
+@mixin elevation() {
+  @each $name, $shadow in $elevation-shadows {
+    &.theme-elevation-#{$name},
+    .theme-elevation-#{$name} {
+      box-shadow: $shadow;
+    }
+  }
+}
diff --git a/webapp/packages/core-theming/src/styles/_mixins.scss b/webapp/packages/core-theming/src/styles/_mixins.scss
index 414654ad3b..31050bd615 100644
--- a/webapp/packages/core-theming/src/styles/_mixins.scss
+++ b/webapp/packages/core-theming/src/styles/_mixins.scss
@@ -11,5 +11,6 @@
 @import './color-scheme';
 @import './branding';
 @import './color';
+@import './elevation';
 @import './form-controls';
 @import './link';
diff --git a/webapp/packages/core-theming/src/styles/theme-dark.module.scss b/webapp/packages/core-theming/src/styles/theme-dark.module.scss
index 7dc927147f..a119ac2d55 100644
--- a/webapp/packages/core-theming/src/styles/theme-dark.module.scss
+++ b/webapp/packages/core-theming/src/styles/theme-dark.module.scss
@@ -10,6 +10,7 @@
 
 @include theme-matcher;
 @include colors;
+@include elevation;
 @include form-controls;
 @include link;
 @include delimiter($mdc-theme-background);
diff --git a/webapp/packages/core-theming/src/styles/theme-light.module.scss b/webapp/packages/core-theming/src/styles/theme-light.module.scss
index 076759280f..ae1befeb9c 100644
--- a/webapp/packages/core-theming/src/styles/theme-light.module.scss
+++ b/webapp/packages/core-theming/src/styles/theme-light.module.scss
@@ -10,6 +10,7 @@
 
 @include theme-matcher;
 @include colors;
+@include elevation;
 @include form-controls;
 @include link;
 @include delimiter($mdc-theme-background);