Fix modal backdrop blur by applying filter on the overlay itself.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/BrandModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: var(--modal-overlay-bg);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   width: 100%;
   max-width: 520px;

apps/business/src/components/CategoryModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: var(--modal-overlay-bg);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   width: 100%;
   max-width: 480px;

apps/business/src/components/ConfirmBulkAddStoreItemsModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: var(--modal-overlay-bg);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   position: relative;
   width: 100%;

apps/business/src/components/ConfirmDeleteModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: rgba(127, 29, 29, 0.28);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: rgba(127, 29, 29, 0.28);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   position: relative;
   width: 100%;

apps/business/src/components/ImageLightbox.module.css

@@ -1,7 +1,6 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
   z-index: 300;
   display: flex;
   flex-direction: column;
@@ -9,21 +8,11 @@
   justify-content: center;
   gap: 16px;
   padding: 24px;
-  background: transparent;
-}
-
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
   background: rgba(15, 23, 42, 0.82);
   backdrop-filter: blur(var(--modal-overlay-blur));
   -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
 }
 
-
 .closeBtn {
   position: absolute;
   top: 20px;

apps/business/src/components/ProductCommentsModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: var(--modal-overlay-bg);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   width: 100%;
   max-width: 640px;

apps/business/src/components/VariationsModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: var(--modal-overlay-bg);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .overlayNested {
   z-index: 1010;
 }

apps/business/src/index.css

@@ -25,7 +25,7 @@
   --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
   --blur-glass: 28px;
   --modal-overlay-bg: rgba(15, 23, 42, 0.4);
-  --modal-overlay-blur: 12px;
+  --modal-overlay-blur: 16px;
   --text-primary: #1e293b;
   --text-secondary: #64748b;
   --text-muted: #94a3b8;

apps/customer/src/components/VariationsModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: var(--modal-overlay-bg);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .overlayNested {
   z-index: 210;
 }

apps/super-admin/src/components/ConfirmDeleteModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: rgba(127, 29, 29, 0.28);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: rgba(127, 29, 29, 0.28);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   position: relative;
   width: 100%;

apps/super-admin/src/components/Modal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: var(--modal-overlay-bg);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   width: 100%;
   max-width: 520px;

apps/super-admin/src/index.css

@@ -30,7 +30,7 @@
   --radius-sm: 12px;
   --blur-glass: 28px;
   --modal-overlay-bg: rgba(15, 23, 42, 0.4);
-  --modal-overlay-blur: 12px;
+  --modal-overlay-blur: 16px;
   --select-arrow-size: 16px;
   --select-arrow-offset: 12px;
   --select-padding-end: 2.5rem;

packages/dashboard-core/src/styles/tokens.css

@@ -25,7 +25,7 @@
   --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
   --blur-glass: 28px;
   --modal-overlay-bg: rgba(15, 23, 42, 0.4);
-  --modal-overlay-blur: 12px;
+  --modal-overlay-blur: 16px;
   --text-primary: #1e293b;
   --text-secondary: #64748b;
   --text-muted: #94a3b8;

packages/dashboard-ui/src/components/PasswordResetModal.module.css

@@ -1,8 +1,9 @@
 .overlay {
   position: fixed;
   inset: 0;
-  isolation: isolate;
+  background: var(--modal-overlay-bg);
-  background: transparent;
+  backdrop-filter: blur(var(--modal-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,19 +11,6 @@
   padding: 20px;
 }
 
-/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
-.overlay::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: var(--modal-overlay-bg);
-  backdrop-filter: blur(var(--modal-overlay-blur));
-  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
-}
-
-
 .modal {
   position: relative;
   width: 100%;