diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 2ac723282..e6072b9c0 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -15,7 +15,7 @@
 }
 
 .offcanvas-backdrop {
-  @include overlay-backdrop($zindex-offcanvas, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+  @include overlay-backdrop(subtract($zindex-offcanvas, 1), $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
 }
 
 .offcanvas-header {
diff --git a/scss/mixins/_backdrop.scss b/scss/mixins/_backdrop.scss
index ab57d4961..9705ae9ee 100644
--- a/scss/mixins/_backdrop.scss
+++ b/scss/mixins/_backdrop.scss
@@ -3,12 +3,12 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: $zindex-modal-backdrop;
+  z-index: $zindex;
   width: 100vw;
   height: 100vh;
-  background-color: $modal-backdrop-bg;
+  background-color: $backdrop-bg;
 
   // Fade for backdrop
   &.fade { opacity: 0; }
-  &.show { opacity: $modal-backdrop-opacity; }
+  &.show { opacity: $backdrop-opacity; }
 }