diff --git a/app/assets/javascripts/discourse/app/components/d-modal.gjs b/app/assets/javascripts/discourse/app/components/d-modal.gjs
index 150faa81298..dfd5cd408e2 100644
--- a/app/assets/javascripts/discourse/app/components/d-modal.gjs
+++ b/app/assets/javascripts/discourse/app/components/d-modal.gjs
@@ -161,6 +161,9 @@ export default class DModal extends Component {
 
     if (this.site.mobileView) {
       this.animating = true;
+
+      this.#animateBackdropOpacity(window.innerHeight);
+
       await this.wrapperElement.animate(
         [
           // hidding first ms to avoid flicker
@@ -228,7 +231,27 @@ export default class DModal extends Component {
     }
   }
 
+  #animateBackdropOpacity(position) {
+    const backdrop = this.wrapperElement.nextElementSibling;
+
+    if (!backdrop) {
+      return;
+    }
+
+    // 85vh is the max height of the modal
+    const opacity = 1 - position / (window.innerHeight * 0.85);
+    requestAnimationFrame(() => {
+      backdrop.style.setProperty(
+        "opacity",
+        Math.max(0, Math.min(opacity, 0.6)),
+        "important"
+      );
+    });
+  }
+
   async #animateWrapperPosition(position) {
+    this.#animateBackdropOpacity(position);
+
     await this.wrapperElement.animate(
       [{ transform: `translateY(${position}px)` }],
       {
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 29f1d7e67c8..a1d120e24d2 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -103,10 +103,6 @@
       animation-duration: 0s;
     }
   }
-
-  &.is-closing + .d-modal__backdrop {
-    display: none;
-  }
 }
 
 //legacy
diff --git a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb
index cc31094fb2a..92c514ea6eb 100644
--- a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb
+++ b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb
@@ -86,6 +86,7 @@ module PageObjects
       def bookmark_message(message)
         if page.has_css?("html.mobile-view", wait: 0)
           click_message_action_mobile(message, "bookmark")
+          expect(page).to have_css(".d-modal:not(.is-animating)")
         else
           hover_message(message)
           find(".bookmark-btn").click
diff --git a/spec/system/page_objects/components/navigation_menu/base.rb b/spec/system/page_objects/components/navigation_menu/base.rb
index 46e48a721b1..943153f2283 100644
--- a/spec/system/page_objects/components/navigation_menu/base.rb
+++ b/spec/system/page_objects/components/navigation_menu/base.rb
@@ -161,6 +161,8 @@ module PageObjects
             click_button(class: "sidebar-section-header-button", visible: false)
           end
 
+          expect(page).to have_css(".d-modal:not(.is-animating)")
+
           PageObjects::Modals::SidebarEditTags.new
         end