diff --git a/frontend/less/dark-vertical/variables.less b/frontend/less/dark-vertical/variables.less
index 5e0069fbaa..808ff6a45a 100644
--- a/frontend/less/dark-vertical/variables.less
+++ b/frontend/less/dark-vertical/variables.less
@@ -54,11 +54,10 @@
 
 @default-heading-bg-color-value: #2c3546;
 
-@modal-backdrop-bg-value: #060403;
+@modal-backdrop-bg-value: fade(#060403, 45%);
 @modal-header-bg-value: @body-bg-value;
 @modal-footer-bg-value: @body-bg-value;
 @modal-content-bg-value: @body-bg-value;
-@modal-backdrop-opacity-value: 0.45;
 @modal-box-shadow-value: none;
 
 @modal-header-border-color-value: @modal-content-bg-value;
diff --git a/frontend/less/espo-vertical/custom.less b/frontend/less/espo-vertical/custom.less
index 8441090418..e734ba1adc 100644
--- a/frontend/less/espo-vertical/custom.less
+++ b/frontend/less/espo-vertical/custom.less
@@ -18,11 +18,11 @@
 }
 
 .side-menu-backdrop {
-    background-color: @modal-backdrop-bg;
-    opacity: var(--modal-backdrop-opacity);
+    background-color: var(--modal-backdrop-bg);
+    backdrop-filter: var(--modal-backdrop-filter);
+    opacity: 1;
 }
 
-
 input.global-search-input {
     border: 1px solid var(--navbar-bg);
 }
diff --git a/frontend/less/espo/elements/modal.less b/frontend/less/espo/elements/modal.less
index 2c766a571a..7fa216a718 100644
--- a/frontend/less/espo/elements/modal.less
+++ b/frontend/less/espo/elements/modal.less
@@ -76,7 +76,9 @@
 }
 
 .modal-backdrop.in {
-    opacity: var(--modal-backdrop-opacity);
+    background-color: var(--modal-backdrop-bg);
+    backdrop-filter: var(--modal-backdrop-filter);
+    opacity: 1;
 }
 
 .modal-footer {
diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less
index 649d6a8941..d3e48934d1 100644
--- a/frontend/less/espo/root-variables.less
+++ b/frontend/less/espo/root-variables.less
@@ -204,11 +204,11 @@
     --input-border-width: @input-border-width-value;
 
     --modal-backdrop-bg: @modal-backdrop-bg-value;
+    --modal-backdrop-filter: @modal-backdrop-filter-value;
     --modal-header-border-color: @modal-header-border-color-value;
     --modal-header-bg: @modal-header-bg-value;
     --modal-footer-bg: @modal-footer-bg-value;
     --modal-content-bg: @modal-content-bg-value;
-    --modal-backdrop-opacity: @modal-backdrop-opacity-value;
     --modal-box-shadow: @modal-box-shadow-value;
 
     --text-color: @text-color-value;
diff --git a/frontend/less/espo/value-variables.less b/frontend/less/espo/value-variables.less
index 004f2b7fac..0422d970fd 100644
--- a/frontend/less/espo/value-variables.less
+++ b/frontend/less/espo/value-variables.less
@@ -60,12 +60,12 @@
 @input-box-shadow-value: inset 0 1px 1px rgb(0 0 0 / 4%);
 @input-border-width-value: 1px;
 
-@modal-backdrop-bg-value: #DBDBDB;
+@modal-backdrop-bg-value: fade(#DBDBDB, 50%);
+@modal-backdrop-filter-value: blur(3px);
 @modal-header-border-color-value: #e5e5e5;
 @modal-header-bg-value: @default-heading-bg-color-value;
 @modal-footer-bg-value: @body-bg-value;
 @modal-content-bg-value: @body-bg-value;
-@modal-backdrop-opacity-value: 0.5;
 @modal-box-shadow-value: 0 5px 15px rgb(0 0 0 / 50%);
 
 @text-color-value: @gray-dark-value;
diff --git a/frontend/less/hazyblue-vertical/variables.less b/frontend/less/hazyblue-vertical/variables.less
index 2eb2346e24..ef35dad420 100644
--- a/frontend/less/hazyblue-vertical/variables.less
+++ b/frontend/less/hazyblue-vertical/variables.less
@@ -1,7 +1,6 @@
 @body-bg-value: #f3f3f3;
 @white-color-value: #FFF;
 @panel-bg-value: @white-color-value;
-@modal-backdrop-bg-value: #a3b3c7;
 @navbar-inverse-bg-value: #546E7A;
 
 @state-info-bg-value: #dbd0f5;
@@ -28,6 +27,7 @@
 
 @site-footer-bg-value: @body-bg-value;
 
+@modal-backdrop-bg-value: fade(#a3b3c7, 50%);
 @modal-header-bg-value: @white-color-value;
 @modal-footer-bg-value: @white-color-value;
 @modal-content-bg-value: @white-color-value;