diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
index 2697633f14..32a45d89cc 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -4,7 +4,7 @@
 // iOS Modals
 // --------------------------------------------------
 
-:host {
+:host:first-of-type {
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
 }
 
diff --git a/core/src/components/modal/modal.md.scss b/core/src/components/modal/modal.md.scss
index 7288a831d0..d294ae4244 100644
--- a/core/src/components/modal/modal.md.scss
+++ b/core/src/components/modal/modal.md.scss
@@ -5,13 +5,16 @@
 // Material Design Modals
 // --------------------------------------------------
 
-:host {
+:host:first-of-type {
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 }
 
 @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
   :host {
     --border-radius: 2px;
+  }
+
+  :host:first-of-type {
     --box-shadow: #{$modal-inset-box-shadow};
   }
 }
diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 2399f8c529..747944e119 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -35,6 +35,7 @@
   --border-color: transparent;
   --background: #{$background-color};
   --box-shadow: none;
+  --backdrop-opacity: 0;
 
   @include position(0, 0, 0, 0);