diff --git a/src/components/card/card.css b/src/components/card/card.css
index 19cecca1f..9f805a952 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -1,18 +1,18 @@
 :host {
   --spacing: var(--wa-space-xl);
-  --border-width: var(--wa-panel-border-width);
-  --border-radius: var(--wa-panel-border-radius);
+  --border-width: var(--wa-card-border-width, var(--wa-panel-border-width));
+  --border-radius: var(--wa-card-border-radius, var(--wa-panel-border-radius));
 
   --inner-border-radius: calc(var(--border-radius) - var(--border-width));
 
   display: flex;
   flex-direction: column;
-  background-color: var(--wa-color-surface-default);
-  border-color: var(--wa-color-surface-border);
+  background-color: var(--wa-card-background-color, var(--wa-color-surface-default));
+  border-color: var(--wa-card-border-color, var(--wa-color-surface-border));
   border-radius: var(--border-radius);
   border-style: var(--wa-panel-border-style);
-  box-shadow: var(--wa-shadow-s);
   border-width: var(--border-width);
+  box-shadow: var(--wa-card-shadow, var(--wa-shadow-s));
   color: var(--wa-color-text-normal);
 }
 
@@ -24,6 +24,7 @@
 
 .image {
   display: flex;
+  background-color: var(--wa-card-image-background-color, transparent);
 
   &::slotted(img) {
     display: block;
@@ -37,6 +38,7 @@
   display: block;
   border-bottom: inherit;
   padding: calc(var(--spacing) / 2) var(--spacing);
+  background-color: var(--wa-card-header-background-color, transparent);
 }
 
 .body {
@@ -50,6 +52,7 @@
   border-end-start-radius: var(--inner-border-radius);
   border-end-end-radius: var(--inner-border-radius);
   padding: var(--spacing);
+  background-color: var(--wa-card-footer-background-color, transparent);
 }
 
 :host(:not([with-header])) .header,
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 7d4f35509..9d708c465 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -22,6 +22,14 @@ import styles from './card.css';
  * @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
  * @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
  * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value.
+ * @cssproperty --wa-card-border-radius - The default radius for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single value.
+ * @cssproperty --wa-card-border-color - The default border color for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single color.
+ * @cssproperty --wa-card-border-width - The default border width for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single value.
+ * @cssproperty --wa-card-background-color - The default background color for all cards, typically set on an ancestor element (e.g. by a theme).
+ * @cssproperty --wa-card-shadow - The default shadow for all cards, typically set on an ancestor element (e.g. by a theme).
+ * @cssproperty --wa-card-header-background-color - The default background color for card headers, typically set on an ancestor element (e.g. by a theme).
+ * @cssproperty --wa-card-footer-background-color - The default background color for card footers, typically set on an ancestor element (e.g. by a theme).
+ * @cssproperty --wa-card-image-background-color - The default background color for card images, typically set on an ancestor element (e.g. by a theme).
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {