diff --git a/components/card/style/index.less b/components/card/style/index.less
index 2e11c88977..7641a6cc6c 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -20,8 +20,9 @@
   }
 
   &-head {
-    height: 48px;
-    line-height: 48px;
+    height: @card-head-height;
+    line-height: @card-head-height;
+    background-color: @card-head-background;
     border-bottom: @border-width-base @border-style-base @border-color-split;
     padding: 0 24px;
 
@@ -32,7 +33,7 @@
       width: 100%;
       overflow: hidden;
       white-space: nowrap;
-      color: @heading-color;
+      color: @card-head-color;
       font-weight: 500;
     }
   }
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index cc3c626e44..f83be38036 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -264,3 +264,9 @@
 // ---
 @rate-star-color: #f5a623;
 @rate-star-bg: #e9e9e9;
+
+// Card
+// ---
+@card-head-height: 48px;
+@card-head-color: @heading-color;
+@card-head-background: @component-background;