diff --git a/packages/varlet-ui/src/card/Card.vue b/packages/varlet-ui/src/card/Card.vue
index ccfbc53e600..dbd5f22be0a 100644
--- a/packages/varlet-ui/src/card/Card.vue
+++ b/packages/varlet-ui/src/card/Card.vue
@@ -1,7 +1,15 @@
 <template>
   <div
     ref="card"
-    :class="classes(n(), [isRow, n('--layout-row')], [outline, n('--outline')], formatElevation(elevation, 1))"
+    :class="
+      classes(
+        n(),
+        [isRow, n('--layout-row')],
+        [outline, n('--outline')],
+        [filled, n('--filled')],
+        [!filled, formatElevation(elevation, 1)]
+      )
+    "
     :style="{
       zIndex: floated ? zIndex : undefined,
     }"
diff --git a/packages/varlet-ui/src/card/__tests__/index.spec.js b/packages/varlet-ui/src/card/__tests__/index.spec.js
index 466a16b2494..473984e11c3 100644
--- a/packages/varlet-ui/src/card/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/card/__tests__/index.spec.js
@@ -113,6 +113,23 @@ describe('test card component props', () => {
     wrapper.unmount()
   })
 
+  test('test card filled', async () => {
+    const wrapper = mount(VarCard, {
+      props: {
+        filled: true,
+      },
+    })
+
+    expect(wrapper.find('.var-card--filled').exists()).toBe(true)
+
+    await wrapper.setProps({
+      filled: false,
+    })
+    expect(wrapper.find('.var-card--filled').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
   test('test card src', async () => {
     const wrapper = mount(VarCard, {
       props: {
diff --git a/packages/varlet-ui/src/card/card.less b/packages/varlet-ui/src/card/card.less
index f1c052eb228..97aa914a1de 100644
--- a/packages/varlet-ui/src/card/card.less
+++ b/packages/varlet-ui/src/card/card.less
@@ -1,6 +1,7 @@
 :root {
   --card-padding: 0 0 15px 0;
   --card-background: var(--color-surface-container-highest);
+  --card-filled-background: hsla(0, 0%, 93%, 1);
   --card-outline-color: var(--color-outline);
   --card-border-radius: 4px;
   --card-image-width: 100%;
@@ -184,4 +185,8 @@
   &--outline {
     border: thin solid var(--card-outline-color);
   }
+
+  &--filled &__floater {
+    background-color: var(--card-filled-background);
+  }
 }
diff --git a/packages/varlet-ui/src/card/docs/en-US.md b/packages/varlet-ui/src/card/docs/en-US.md
index 685cf075cdb..ed527a4f28d 100644
--- a/packages/varlet-ui/src/card/docs/en-US.md
+++ b/packages/varlet-ui/src/card/docs/en-US.md
@@ -148,6 +148,19 @@ const floating = ref(false)
 </template>
 ```
 
+### Filled
+
+```html
+<template>
+  <var-card
+    filled
+    title="Dangerous"
+    subtitle="The girl was dangerous"
+    description="The way she came into the place I knew right then and there.There was something different about this girl.The way she moved her hair her face her lines.Divinity in motion as she stalked the room.I could feel the aura of her presence.Every head turned feeling passion and lust.The girl was persuasive the girl I could not trust.The girl was bad.The girl was dangerous."
+  />
+</template>
+```
+
 ## API
 
 ### Props
@@ -161,6 +174,7 @@ const floating = ref(false)
 | `src`               | The src of Image                                                | _string_ | `-`      |
 | `layout`            | Arrangement mode, options `row` `column`                        | _string_ | `column` |
 | `fit`               | Fill mode, options `fill` `contain` `cover` `none` `scale-down` | _string_ | `cover`  |
+| `filled`            | Whether to be filled card                                       | _boolean_ | `false`  |
 | `outline`           | Whether to be outline card                                      | _boolean_ | `false`  |
 | `alt`               | Image alt text, the same as the native attribute of the `img` tag                                                       | _string_ | `-`      |
 | `image-height`      | Height of Image                                                 | _string \| number_  | `-`     |
@@ -195,6 +209,7 @@ Here are the CSS variables used by the component. Styles can be customized using
 | Variable                            | Default               |
 |-------------------------------------|-----------------------|
 | `--card-background`                 | `var(--color-surface-container-highest)`                |
+| `--card-filled-background`          | `hsla(0, 0%, 93%, 1)` |
 | `--card-padding`                    | `0px 0 15px 0`        |
 | `--card-border-radius`              | `4px`                 |
 | `--card-outline-color`              | `var(--color-outline)` |
diff --git a/packages/varlet-ui/src/card/docs/zh-CN.md b/packages/varlet-ui/src/card/docs/zh-CN.md
index 32034416bc4..d914209d5d7 100644
--- a/packages/varlet-ui/src/card/docs/zh-CN.md
+++ b/packages/varlet-ui/src/card/docs/zh-CN.md
@@ -148,6 +148,20 @@ const floating = ref(false)
 </template>
 ```
 
+
+### 填充
+
+```html
+<template>
+  <var-card
+    filled
+    title="本草纲目"
+    subtitle="我表情悠哉 跳个大概"
+    description="如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~"
+  />
+</template>
+```
+
 ## API
 
 ### 属性
@@ -162,6 +176,7 @@ const floating = ref(false)
 | `layout`            | 排列方式，可选值为 `row` `column`                               | _string_ | `column` |
 | `fit`               | 填充模式，可选值为 `fill` `contain` `cover` `none` `scale-down` | _string_ | `cover`  |
 | `outline`           | 是否使用外边框                                                | _boolean_ | `false`  |
+| `filled`            | 是否使用填充                                                | _boolean_ | `false`  |
 | `alt`               | 替代文本，和 img 标签原生属性一致                                                   | _string_ | `-`      |
 | `image-height`      | 图片高度                                                   | _string \| number_  | `-`     |
 | `image-width`       | 图片宽度                                                   | _string \| number_  | `-`     |
@@ -195,6 +210,7 @@ const floating = ref(false)
 | 变量名                                 | 默认值                  |
 |-------------------------------------|----------------------|
 | `--card-background`                 | `var(--color-surface-container-highest)`               |
+| `--card-filled-background`          | `hsla(0, 0%, 93%, 1)` |
 | `--card-padding`                    | `0px 0 15px 0`       |
 | `--card-border-radius`              | `4px`                |
 | `--card-outline-color`              | `var(--color-outline)` |
diff --git a/packages/varlet-ui/src/card/example/index.vue b/packages/varlet-ui/src/card/example/index.vue
index 06f409d1ba0..e24b3a18ba4 100644
--- a/packages/varlet-ui/src/card/example/index.vue
+++ b/packages/varlet-ui/src/card/example/index.vue
@@ -60,6 +60,9 @@ onThemeChange()
 
   <app-type>{{ t('outline') }}</app-type>
   <var-card :title="t('title')" :subtitle="t('subtitle')" outline elevation="0" :description="t('description')" />
+
+  <app-type>{{ t('filled') }}</app-type>
+  <var-card :title="t('title')" :subtitle="t('subtitle')" filled :description="t('description')" />
 </template>
 
 <style scoped lang="less">
diff --git a/packages/varlet-ui/src/card/example/locale/en-US.ts b/packages/varlet-ui/src/card/example/locale/en-US.ts
index e790976151d..c424f5fc1f7 100644
--- a/packages/varlet-ui/src/card/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/card/example/locale/en-US.ts
@@ -3,6 +3,7 @@ export default {
   title: 'Dangerous',
   showSubtitle: 'Show Subtitle',
   outline: 'Outline',
+  filled: 'Filled',
   subtitle: 'The girl was dangerous',
   horizontal: 'Horizontal',
   description:
diff --git a/packages/varlet-ui/src/card/example/locale/zh-CN.ts b/packages/varlet-ui/src/card/example/locale/zh-CN.ts
index bd3386f1646..32d2c7a8c29 100644
--- a/packages/varlet-ui/src/card/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/card/example/locale/zh-CN.ts
@@ -3,6 +3,7 @@ export default {
   title: '本草纲目',
   showSubtitle: '显示副标题',
   outline: '外边框',
+  filled: '填充',
   subtitle: '我表情悠哉 跳个大概',
   horizontal: '横向显示',
   description:
diff --git a/packages/varlet-ui/src/card/props.ts b/packages/varlet-ui/src/card/props.ts
index b2989340193..7a114441b16 100644
--- a/packages/varlet-ui/src/card/props.ts
+++ b/packages/varlet-ui/src/card/props.ts
@@ -14,6 +14,7 @@ export const props = {
   imageHeight: [String, Number],
   imageWidth: [String, Number],
   outline: Boolean,
+  filled: Boolean,
   layout: {
     type: String as PropType<CardLayout>,
     default: 'column',
diff --git a/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap
index e31cf6cf774..c2beefe473b 100644
--- a/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap
@@ -136,6 +136,7 @@ exports[`test dark theme 1`] = `
   "--card-description-font-size": "14px",
   "--card-description-margin": "20px 0 0 0",
   "--card-description-padding": "0 13px",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-floating-buttons-bottom": "16px",
   "--card-floating-buttons-color": "#fff",
   "--card-floating-buttons-right": "16px",
@@ -982,6 +983,7 @@ exports[`test md3Dark theme 1`] = `
   "--card-description-font-size": "14px",
   "--card-description-margin": "32px 0 0 0",
   "--card-description-padding": "0 16px",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-floating-buttons-bottom": "16px",
   "--card-floating-buttons-color": "#fff",
   "--card-floating-buttons-right": "16px",
@@ -1812,6 +1814,7 @@ exports[`test md3Light theme 1`] = `
   "--card-description-font-size": "14px",
   "--card-description-margin": "32px 0 0 0",
   "--card-description-padding": "0 16px",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-floating-buttons-bottom": "16px",
   "--card-floating-buttons-color": "#fff",
   "--card-floating-buttons-right": "16px",
diff --git a/packages/varlet-ui/src/themes/dark/card.ts b/packages/varlet-ui/src/themes/dark/card.ts
index 54efd4313df..36e0b43b83a 100644
--- a/packages/varlet-ui/src/themes/dark/card.ts
+++ b/packages/varlet-ui/src/themes/dark/card.ts
@@ -4,6 +4,7 @@ export default {
   '--card-description-color': '#aaaaaa',
   '--card-padding': '0 0 15px 0',
   '--card-background': 'var(--color-surface-container-highest)',
+  '--card-filled-background': 'var(--color-surface-container-highest)',
   '--card-outline-color': 'var(--color-outline)',
   '--card-border-radius': '4px',
   '--card-image-width': '100%',
diff --git a/packages/varlet-ui/src/themes/md3-dark/card.ts b/packages/varlet-ui/src/themes/md3-dark/card.ts
index 477e1ab5761..f13b184e9c9 100644
--- a/packages/varlet-ui/src/themes/md3-dark/card.ts
+++ b/packages/varlet-ui/src/themes/md3-dark/card.ts
@@ -1,6 +1,7 @@
 export default {
   '--card-border-radius': '12px',
   '--card-background': 'var(--color-surface-container-highest)',
+  '--card-filled-background': 'var(--color-surface-container-highest)',
   '--card-image-height': '188px',
   '--card-title-color': 'var(--color-inverse-surface)',
   '--card-title-font-size': '16px',
diff --git a/packages/varlet-ui/src/themes/md3-light/card.ts b/packages/varlet-ui/src/themes/md3-light/card.ts
index 2fe28b72eed..31e7b6014e0 100644
--- a/packages/varlet-ui/src/themes/md3-light/card.ts
+++ b/packages/varlet-ui/src/themes/md3-light/card.ts
@@ -1,6 +1,7 @@
 export default {
   '--card-border-radius': '12px',
   '--card-background': 'var(--color-surface-container-low)',
+  '--card-filled-background': 'var(--color-surface-container-highest)',
   '--card-image-height': '188px',
   '--card-title-color': '#1D1B20',
   '--card-title-font-size': '16px',
diff --git a/packages/varlet-ui/types/card.d.ts b/packages/varlet-ui/types/card.d.ts
index 834bae3726d..e8f231079ef 100644
--- a/packages/varlet-ui/types/card.d.ts
+++ b/packages/varlet-ui/types/card.d.ts
@@ -17,6 +17,7 @@ export interface CardProps extends BasicAttributes {
   subtitle?: string
   description?: string
   elevation?: boolean | number | string
+  filled?: boolean
   ripple?: boolean
   onClick?: ListenerProp<(e: Event) => void>
   layout?: CardLayout