diff --git a/scss/_progressBar.scss b/scss/_progressBar.scss
index 14978634..938f3084 100644
--- a/scss/_progressBar.scss
+++ b/scss/_progressBar.scss
@@ -43,8 +43,8 @@
     border-bottom-left-radius: var(--toastify-toast-bd-radius);
   }
 
-  &--background {
-    opacity: 0.1;
+  &--bg {
+    opacity: var(--toastify-color-progress-bgo);
     width: 100%;
     height: 100%;
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 773fae56..8a92ca0c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -56,4 +56,5 @@ $rt-mobile: 'only screen and (max-width : 480px)' !default;
   --toastify-color-progress-success: var(--toastify-color-success);
   --toastify-color-progress-warning: var(--toastify-color-warning);
   --toastify-color-progress-error: var(--toastify-color-error);
+  --toastify-color-progress-bgo: 0.2;
 }
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 40052219..27ea0a58 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -127,7 +127,7 @@ export function ProgressBar({
   return (
     <div className={`${Default.CSS_NAMESPACE}__progress-bar--wrp`}>
       <div
-        className={`${Default.CSS_NAMESPACE}__progress-bar--background ${Default.CSS_NAMESPACE}__progress-bar-theme--${theme} ${Default.CSS_NAMESPACE}__progress-bar--${type}`}
+        className={`${Default.CSS_NAMESPACE}__progress-bar--bg ${Default.CSS_NAMESPACE}__progress-bar-theme--${theme} ${Default.CSS_NAMESPACE}__progress-bar--${type}`}
       />
       <div
         role="progressbar"