diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index c94fbb2115..75676269f7 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -40,6 +40,7 @@ export class HaDialog extends MwcDialog {
         .mdc-dialog {
           --mdc-dialog-scroll-divider-color: var(--divider-color);
           z-index: var(--dialog-z-index, 7);
+          backdrop-filter: var(--dialog-backdrop-filter, none);
         }
         .mdc-dialog__actions {
           justify-content: var(--justify-action-buttons, flex-end);
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 0f0c7e2dbb..7167bde061 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -113,6 +113,11 @@ documentContainer.innerHTML = `<custom-style>
     paper-dialog-scrollable.can-scroll > .scrollable {
       -webkit-overflow-scrolling: touch !important;
     }
+
+    /* for paper-dialog */
+    iron-overlay-backdrop {
+      backdrop-filter: var(--dialog-backdrop-filter, none);
+    }
   </style>
 </custom-style>`;