diff --git a/scss/_progress.scss b/scss/_progress.scss
index 2670606e0c..d0dc2023d0 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -59,13 +59,13 @@
 .progress[value]::-webkit-progress-bar {
   background-color: $progress-bg;
   @include border-radius($border-radius);
-  @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  @include box-shadow($progress-box-shadow);
 }
 base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
 .progress[value] {
   background-color: $progress-bg;
   @include border-radius($border-radius);
-  @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  @include box-shadow($progress-box-shadow);
 }
 
 // IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@@ -73,7 +73,7 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
   .progress {
     background-color: $progress-bg;
     @include border-radius($border-radius);
-    @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+    @include box-shadow($progress-box-shadow);
   }
   .progress-bar {
     display: inline-block;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6c3e725c20..b85ab50b19 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -575,6 +575,7 @@ $alert-danger-border:         $state-danger-border !default;
 $progress-bg:                 #eee !default;
 $progress-bar-color:          #0074d9 !default;
 $progress-border-radius:      $border-radius !default;
+$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
 
 $progress-bar-bg:             $brand-primary !default;
 $progress-bar-success-bg:     $brand-success !default;