diff --git a/components/card/style/index.less b/components/card/style/index.less
index 7054d927d2..654d4da365 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -6,14 +6,14 @@
 @card-hover-border: fade(@black, 9%);
 @card-action-icon-size: 16px;
 
-@gradient-min: fade(@card-background, 20%);
-@gradient-max: fade(@card-background, 40%);
+@gradient-min: fade(@card-skeleton-bg, 20%);
+@gradient-max: fade(@card-skeleton-bg, 40%);
 
 .@{card-prefix-cls} {
   .reset-component;
 
   position: relative;
-  background: @component-background;
+  background: @card-background;
   border-radius: @card-radius;
   transition: all 0.3s;
 
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 3a6fd61ccd..12e71efd90 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -487,7 +487,8 @@
 @card-inner-head-padding: 12px;
 @card-padding-base: 24px;
 @card-actions-background: @background-color-light;
-@card-background: #cfd8dc;
+@card-skeleton-bg: #cfd8dc;
+@card-background: @component-background;
 @card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
 @card-radius: @border-radius-sm;