diff --git a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6e4007551b..53d40a3524 100644
--- a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -75,6 +75,81 @@ Array [
 ]
 `;
 
+exports[`renders ./components/tour/demo/mask.tsx extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Begin Tour
+    </span>
+  </button>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+           Upload
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Save
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/tour/demo/non-modal.tsx extend context correctly 1`] = `
 Array [
   <button
diff --git a/components/tour/__tests__/__snapshots__/demo.test.ts.snap b/components/tour/__tests__/__snapshots__/demo.test.ts.snap
index 4b51002992..5e110a5ad4 100644
--- a/components/tour/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tour/__tests__/__snapshots__/demo.test.ts.snap
@@ -75,6 +75,81 @@ Array [
 ]
 `;
 
+exports[`renders ./components/tour/demo/mask.tsx correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Begin Tour
+    </span>
+  </button>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+           Upload
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          Save
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/tour/demo/non-modal.tsx correctly 1`] = `
 Array [
   <button
diff --git a/components/tour/demo/mask.md b/components/tour/demo/mask.md
new file mode 100644
index 0000000000..1252fd1faf
--- /dev/null
+++ b/components/tour/demo/mask.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义遮罩样式。
+
+## en-US
+
+custom mask style.
diff --git a/components/tour/demo/mask.tsx b/components/tour/demo/mask.tsx
new file mode 100644
index 0000000000..416108caf2
--- /dev/null
+++ b/components/tour/demo/mask.tsx
@@ -0,0 +1,75 @@
+import React, { useRef, useState } from 'react';
+import { Button, Divider, Space, Tour } from 'antd';
+import type { TourProps } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
+
+const App: React.FC = () => {
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref3 = useRef(null);
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const steps: TourProps['steps'] = [
+    {
+      title: 'Upload File',
+      description: 'Put your files here.',
+      cover: (
+        <img
+          alt="tour.png"
+          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
+        />
+      ),
+      target: () => ref1.current,
+    },
+    {
+      title: 'Save',
+      description: 'Save your changes.',
+      target: () => ref2.current,
+      mask: {
+        style: {
+          boxShadow: 'inset 0 0 15px #fff',
+        },
+        color: 'rgba(40, 0, 255, .4)',
+      },
+    },
+    {
+      title: 'Other Actions',
+      description: 'Click to see other actions.',
+      target: () => ref3.current,
+      mask: false,
+    },
+  ];
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        Begin Tour
+      </Button>
+
+      <Divider />
+
+      <Space>
+        <Button ref={ref1}> Upload</Button>
+        <Button ref={ref2} type="primary">
+          Save
+        </Button>
+        <Button ref={ref3} icon={<EllipsisOutlined />} />
+      </Space>
+
+      <Tour
+        open={open}
+        onClose={() => setOpen(false)}
+        steps={steps}
+        mask={{
+          style: {
+            boxShadow: 'inset 0 0 15px #333',
+          },
+          color: 'rgba(80, 255, 255, .4)',
+        }}
+      />
+    </>
+  );
+};
+
+export default App;
diff --git a/components/tour/index.en-US.md b/components/tour/index.en-US.md
index 9ae4e0f8ce..0682fea5a2 100644
--- a/components/tour/index.en-US.md
+++ b/components/tour/index.en-US.md
@@ -19,6 +19,7 @@ Use when you want to guide users through a product.
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/non-modal.tsx">Non-modal</code>
 <code src="./demo/placement.tsx">Placement</code>
+<code src="./demo/mask.tsx">custom mask style</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
 ## API
@@ -30,7 +31,7 @@ Use when you want to guide users through a product.
 | arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}` | `true` |  |
 | placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
 | onClose | Callback function on shutdown | `Function` | - |  |
-| mask | Whether to enable masking | `boolean` | `true` |  |
+| mask | Whether to enable masking, change mask style and fill color by pass custom props | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
 | type | Type, affects the background color and text color | `default` `primary` | `default` |  |
 | open | Open tour | `boolean` | - |  |
 | onChange | Callback when the step changes. Current is the previous step | `(current: number) => void` | - |  |
@@ -47,7 +48,7 @@ Use when you want to guide users through a product.
 | description | description | `ReactNode` | - |  |
 | placement | Position of the guide card relative to the target element | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
 | onClose | Callback function on shutdown | `Function` | - |  |
-| mask | Whether to enable masking, the default follows the `mask` property of Tour | `boolean` | `true` |  |
+| mask | Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
 | type | Type, affects the background color and text color | `default` `primary` | `default` |  |
 | nextButtonProps | Properties of the Next button | `{ children: ReactNode; onClick: Function }` | - |  |
 | prevButtonProps | Properties of the previous button | `{ children: ReactNode; onClick: Function }` | - |  |
diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md
index a96cde08b2..2ada48fad9 100644
--- a/components/tour/index.zh-CN.md
+++ b/components/tour/index.zh-CN.md
@@ -20,6 +20,7 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/non-modal.tsx">非模态</code>
 <code src="./demo/placement.tsx">位置</code>
+<code src="./demo/mask.tsx">自定义遮罩样式</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
 ## API
@@ -32,7 +33,7 @@ demo:
 | placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` |  |
 | onClose | 关闭引导时的回调函数 | `Function` | - |  |
 | onFinish | 引导完成时的回调 | `Function` | - |  |
-| mask | 是否启用蒙层 | `boolean` | `true` |  |
+| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
 | type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` |  |
 | open | 打开引导 | `boolean` | - |  |
 | onChange | 步骤改变时的回调，current 为当前前的步骤 | `(current: number) => void` | - |  |
@@ -49,7 +50,7 @@ demo:
 | description | 主要描述部分 | `ReactNode` | - |  |
 | placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` |  |  |
 | onClose | 关闭引导时的回调函数 | `Function` | - |  |
-| mask | 是否启用蒙层，默认跟随 Tour 的 `mask` 属性 | `boolean` | `true` |  |
+| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 `mask` 属性 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` |  |
 | type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` |  |
 | nextButtonProps | 下一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - |  |
 | prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - |  |
diff --git a/package.json b/package.json
index d0daade93b..5f0bb02e1a 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.4.0",
-    "@rc-component/tour": "~1.1.0",
+    "@rc-component/tour": "~1.3.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",