diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
index b24c2f7675..2a1f25ab0a 100644
--- a/components/tooltip/style/index.less
+++ b/components/tooltip/style/index.less
@@ -5,8 +5,7 @@
 
 @tooltip-arrow-shadow-width: 3px;
 
-@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
-  @tooltip-arrow-shadow-width * 2;
+@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) + @tooltip-arrow-shadow-width * 2;
 
 @tooltip-arrow-offset-vertical: 5px; // 8 - 3px
 @tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
@@ -82,10 +81,9 @@
 
     &-content {
       // Use linear gradient to mix box shadow of tooltip inner
-      --antd-arrow-background-color: linear-gradient(
-        to right bottom,
-        fadeout(@tooltip-bg, 10%),
-        @tooltip-bg
+      --antd-arrow-background-color: var(
+        --color, // used when setting custom color, fallback is provide line below in case no color is set
+        linear-gradient(to right bottom, fadeout(@tooltip-bg, 10%), @tooltip-bg) // fallback
       );
 
       position: absolute;
diff --git a/components/tooltip/tooltip.ts b/components/tooltip/tooltip.ts
index c0465c3c49..d24ce8b8a6 100644
--- a/components/tooltip/tooltip.ts
+++ b/components/tooltip/tooltip.ts
@@ -163,7 +163,8 @@ export class NzToolTipComponent extends NzTooltipBaseComponent {
     };
 
     this._contentStyleMap = {
-      backgroundColor: !!this.nzColor && !isColorPreset ? this.nzColor : null
+      backgroundColor: !!this.nzColor && !isColorPreset ? this.nzColor : null,
+      '--color': this.nzColor
     };
   }
 }