diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index df8a066986..abaf86e423 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -60,7 +60,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
       }
 
       extraNode.style.borderColor = waveColor;
-      styleForPesudo.innerHTML = `[ant-click-animating-without-extra-node="true"]:after { border-color: ${waveColor}; }`;
+      styleForPesudo.innerHTML = `html body { --antd-wave-shadow-color: ${waveColor}; }`;
       if (!document.body.contains(styleForPesudo)) {
         document.body.appendChild(styleForPesudo);
       }
diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less
index 7533baec05..794d3ad71d 100644
--- a/components/style/core/motion/other.less
+++ b/components/style/core/motion/other.less
@@ -9,16 +9,21 @@
   position: relative;
 }
 
+html {
+  --antd-wave-shadow-color: @primary-color;
+}
+
 [ant-click-animating-without-extra-node='true']::after,
 .ant-click-animating-node {
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: block;
-  border: 0 solid @primary-color;
   border-radius: inherit;
+  box-shadow: 0 0 0 0 @primary-color;
+  box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
   opacity: 0.2;
   animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
   animation-fill-mode: forwards;
@@ -28,11 +33,8 @@
 
 @keyframes waveEffect {
   100% {
-    top: -@wave-animation-width;
-    right: -@wave-animation-width;
-    bottom: -@wave-animation-width;
-    left: -@wave-animation-width;
-    border-width: @wave-animation-width;
+    box-shadow: 0 0 0 @primary-color;
+    box-shadow: 0 0 0 @wave-animation-width var(--antd-wave-shadow-color);
   }
 }