diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 105c8c15809d05419e7760269e4d4b5239e974e6..579276eedc0a557b1595518679e473a216392293 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "27.5 kB"
+      "maxSize": "27.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 5f1429fe4bfc1f42cc36ed13717fc5d74200f20f..041135389161e0ec9bdd49ad8279b5d9ffced828 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -112,12 +112,12 @@
 // Modal background
 .modal-backdrop {
   // scss-docs-start modal-backdrop-css-vars
-  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
-  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
-  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
+  --#{$prefix}modal-backdrop-zindex: #{$zindex-modal-backdrop};
+  --#{$prefix}modal-backdrop-bg: #{$modal-backdrop-bg};
+  --#{$prefix}modal-backdrop-opacity: #{$modal-backdrop-opacity};
   // scss-docs-end modal-backdrop-css-vars
 
-  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
+  @include overlay-backdrop(var(--#{$prefix}modal-backdrop-zindex), var(--#{$prefix}modal-backdrop-bg), var(--#{$prefix}modal-backdrop-opacity));
 }
 
 // Modal header
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 04e3ce6442b9baf9f8d58060fdb4fcdcf6451f81..519e94a340214117855c807a921f55d25bb124b4 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -116,8 +116,15 @@
   }
 }
 
+// Offcanvas background
 .offcanvas-backdrop {
-  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+  // scss-docs-start offcanvas-backdrop-css-vars
+  --#{$prefix}offcanvas-backdrop-zindex: #{$zindex-offcanvas-backdrop};
+  --#{$prefix}offcanvas-backdrop-bg: #{$offcanvas-backdrop-bg};
+  --#{$prefix}offcanvas-backdrop-opacity: #{$offcanvas-backdrop-opacity};
+  // scss-docs-end offcanvas-backdrop-css-vars
+
+  @include overlay-backdrop(var(--#{$prefix}offcanvas-backdrop-zindex), var(--#{$prefix}offcanvas-backdrop-bg), var(--#{$prefix}offcanvas-backdrop-opacity));
 }
 
 .offcanvas-header {
diff --git a/scss/_root.scss b/scss/_root.scss
index d9355b38ef6dec8e7ea3f90ef1c230e402b01779..7b7a0129ad727628a86f413f6ec70573aec3bbb3 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -48,6 +48,9 @@
     --#{$prefix}body-text-align: #{$body-text-align};
   }
   --#{$prefix}body-bg: #{$body-bg};
+
+  --#{$prefix}backdrop-bg: #{$backdrop-bg};
+  --#{$prefix}backdrop-opacity: #{$backdrop-opacity};
   // scss-docs-end root-body-variables
 
   // scss-docs-start root-border-var
diff --git a/scss/_variables.scss b/scss/_variables.scss
index af72ef2043a306cb516045ebb602493d560eaf72..7fb6719fa40be11e62a484e65113fdab9416f26e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -402,6 +402,10 @@ $body-bg:                   $white !default;
 $body-color:                $gray-900 !default;
 $body-text-align:           null !default;
 
+// Backdrop
+$backdrop-bg:               $black !default;
+$backdrop-opacity:          .5 !default;
+
 // Links
 //
 // Style anchor elements.
@@ -1418,9 +1422,8 @@ $modal-content-border-radius:       $border-radius-lg !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
 $modal-content-box-shadow-xs:       $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up:    $box-shadow !default;
-
-$modal-backdrop-bg:                 $black !default;
-$modal-backdrop-opacity:            .5 !default;
+$modal-backdrop-bg:                 var(--#{$prefix}backdrop-bg) !default;
+$modal-backdrop-opacity:            var(--#{$prefix}backdrop-opacity) !default;
 
 $modal-header-border-color:         var(--#{$prefix}border-color) !default;
 $modal-header-border-width:         $modal-content-border-width !default;
@@ -1618,19 +1621,19 @@ $btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default
 // Offcanvas
 
 // scss-docs-start offcanvas-variables
-$offcanvas-padding-y:               $modal-inner-padding !default;
-$offcanvas-padding-x:               $modal-inner-padding !default;
+$offcanvas-padding-y:               $spacer !default;
+$offcanvas-padding-x:               $spacer !default;
 $offcanvas-horizontal-width:        400px !default;
 $offcanvas-vertical-height:         30vh !default;
 $offcanvas-transition-duration:     .3s !default;
-$offcanvas-border-color:            $modal-content-border-color !default;
-$offcanvas-border-width:            $modal-content-border-width !default;
-$offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                $modal-content-bg !default;
-$offcanvas-color:                   $modal-content-color !default;
-$offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
-$offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
-$offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
+$offcanvas-border-color:            var(--#{$prefix}border-color-translucent) !default;
+$offcanvas-border-width:            var(--#{$prefix}border-width) !default;
+$offcanvas-title-line-height:       $line-height-base !default;
+$offcanvas-bg-color:                $white !default;
+$offcanvas-color:                   null !default;
+$offcanvas-box-shadow:              $box-shadow-sm !default;
+$offcanvas-backdrop-bg:             var(--#{$prefix}backdrop-bg) !default;
+$offcanvas-backdrop-opacity:        var(--#{$prefix}backdrop-opacity) !default;
 // scss-docs-end offcanvas-variables
 
 // Code