Skip to main content

UI Bug Fix: Standardizing Modal Backdrop Overlay & Backdrop Blur

Last Updated: 16/07/2026
Type: UI Layout Fix — Modal Overlay Styling
System: Saleor CMS — Global Modal Component Styles
Severity: 🟠 Medium — Important for visual hierarchy; ensures user focus is isolated on the active modal form without background noise distraction

Feedback Screenshot:

1. Identified Spacing & Styling Issue​

Currently, when a modal popup (such as the Service creation/edit form) is opened:

  • The background overlay is transparent (lacks any dark tint or opacity).
  • As a result, the active form elements blend into the background table list details behind them, causing severe visual noise and confusing users.
  • The modal does not feel "elevated" above the page.

To establish a premium, high-contrast visual hierarchy, we must apply a Dark Backdrop Tint combined with a Backdrop Blur effect to push the background into the distance.

2. Redesign & Spacing Specifications​

2.1 Backdrop Overlay Specs​

  • Background Color: rgba(0, 0, 0, 0.45) (45% black opacity tint).
  • Blur Effect: backdrop-filter: blur(4px) (applies a soft lens blur to all background elements behind the modal layer).
  • Z-Index Layering: The backdrop overlay must sit at z-index: 1000, and the modal dialog box must sit at z-index: 1010.

3. Style Code Adjustments (CSS / SCSS)​

Modify the global modal container classes (often styled in Modal.scss or dialog components):

3.1 Before (Transparent Backdrop)​

// ❌ WRONG — Missing tint and blur layers
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  
  // ❌ Lacks background color and blur filter
  background-color: transparent; 
}

.modal-dialog {
  z-index: 101;
  background: #FFFFFF;
  box-shadow: none; // ❌ Weak/no elevation shadow
}

3.2 After (Modern Blurry Backdrop & Raised Shadow)​

// ✅ CORRECT — 45% black tint + 4px blur overlay
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  
  // ✅ Dark dim overlay
  background-color: rgba(0, 0, 0, 0.45);
  
  // ✅ Soft background blur (modern UI look)
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); // Safari compatibility
  
  // Smooth fade-in transition
  transition: opacity 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  position: relative;
  z-index: 1010;
  background-color: #FFFFFF;
  border-radius: 12px;
  
  // ✅ Rich drop shadow (elevation shadow)
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 
              0 4px 12px rgba(0, 0, 0, 0.1);
  
  // Ensure the wider desktop dimensions are applied:
  width: 90%;
  max-width: 960px; // Coincides with cms-popup-modal-width-increase.md
  
  // Smooth slide-up transition
  animation: modalSlideUp 0.2s ease-out forwards;
}

@keyframes modalSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

Technical Checklist​

  • Locate the global modal backdrop/overlay component or global styles file (e.g. ModalOverlay.tsx or modal.scss).
  • Apply background-color: rgba(0, 0, 0, 0.45) to the overlay element style declaration.
  • Add backdrop-filter: blur(4px) to the overlay style.
  • Add -webkit-backdrop-filter: blur(4px) to support Safari / iOS WebViews.
  • Check z-index hierarchies: ensure the overlay has z-index: 1000 and sits above navigation bars (which are typically z-index: 100 or 500).
  • Update the modal container .modal-dialog with the elevation box-shadow parameters to make the card appear floating.
  • Verify that clicking the dark backdrop area outside the modal closes the modal (or prompts the user if there are unsaved changes).
  • Run build tests to ensure CSS rules compile without preprocessor errors.