diff --git a/assets/index.less b/assets/index.less
index 5fbbf71..0e27ca0 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -104,6 +104,7 @@
       inline-size: 100%;
       block-size: 2px;
       border: 0;
+      --progress-color: #31afff;
 
       &,
       &::-webkit-progress-bar {
@@ -111,11 +112,11 @@
       }
 
       &::-moz-progress-bar {
-        background-color: #31afff;
+        background: var(--progress-color);
       }
 
       &::-webkit-progress-value {
-        background-color: #31afff;
+        background: var(--progress-color);
       }
     }
   }
diff --git a/docs/examples/showProgress.tsx b/docs/examples/showProgress.tsx
index 4d0ebbc..a0c27a2 100644
--- a/docs/examples/showProgress.tsx
+++ b/docs/examples/showProgress.tsx
@@ -28,6 +28,16 @@ export default () => {
       >
         Not Pause On Hover
       </button>
+      <button
+        onClick={() => {
+          notice.open({
+            content: `${new Date().toISOString()}`,
+            progressBarColor: 'yellow',
+          });
+        }}
+      >
+        Show Progress Bar with custom color
+      </button>
       {contextHolder}
     </>
   );
diff --git a/src/Notice.tsx b/src/Notice.tsx
index 38a9b9c..7b86bb1 100644
--- a/src/Notice.tsx
+++ b/src/Notice.tsx
@@ -23,6 +23,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     duration = 4.5,
     showProgress,
     pauseOnHover = true,
+    progressBarColor,
 
     eventKey,
     content,
@@ -40,6 +41,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
   const [spentTime, setSpentTime] = React.useState(0);
   const mergedHovering = forcedHovering || hovering;
   const mergedShowProgress = duration > 0 && showProgress;
+  const mergedProgressBarColor = mergedShowProgress && progressBarColor;
 
   // ======================== Close =========================
   const onInternalClose = () => {
@@ -161,7 +163,12 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
 
       {/* Progress Bar */}
       {mergedShowProgress && (
-        <progress className={`${noticePrefixCls}-progress`} max="100" value={validPercent}>
+        <progress
+          className={`${noticePrefixCls}-progress`}
+          max="100"
+          style={{ '--progress-color': mergedProgressBarColor } as React.CSSProperties}
+          value={validPercent}
+        >
           {validPercent + '%'}
         </progress>
       )}
diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx
index 783b72b..e36db3c 100644
--- a/src/hooks/useNotification.tsx
+++ b/src/hooks/useNotification.tsx
@@ -18,6 +18,7 @@ export interface NotificationConfig {
   maxCount?: number;
   duration?: number;
   showProgress?: boolean;
+  progressBarColor?: string;
   pauseOnHover?: boolean;
   /** @private. Config for notification holder style. Safe to remove if refactor */
   className?: (placement: Placement) => string;
diff --git a/src/interface.ts b/src/interface.ts
index 52ccbe0..5ce47b4 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -8,6 +8,7 @@ export interface NoticeConfig {
   content?: React.ReactNode;
   duration?: number | null;
   showProgress?: boolean;
+  progressBarColor?: string;
   pauseOnHover?: boolean;
   closeIcon?: React.ReactNode;
   closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 4217e31..0f05618 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -849,4 +849,44 @@ describe('Notification.Basic', () => {
       expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy();
     });
   });
+
+  describe('custom progress bar color', () => {
+    it('should display progress bar with custom color', () => {
+      const { instance } = renderDemo({
+        duration: 1,
+        showProgress: true,
+        progressBarColor: 'red',
+      });
+
+      act(() => {
+        instance.open({
+          content: <p className="test">1</p>,
+        });
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toHaveStyle({
+        '--progress-color': 'red',
+      });
+    });
+
+    it('should display progress bar with line-gradient color', () => {
+      const { instance } = renderDemo({
+        duration: 1,
+        showProgress: true,
+        progressBarColor:
+          'linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%)',
+      });
+
+      act(() => {
+        instance.open({
+          content: <p className="test">1</p>,
+        });
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toHaveStyle({
+        '--progress-color':
+          'linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%)',
+      });
+    });
+  });
 });