diff --git a/.changeset/card-header-footer-bg-vars.md b/.changeset/card-header-footer-bg-vars.md
new file mode 100644
index 000000000..eb116b336
--- /dev/null
+++ b/.changeset/card-header-footer-bg-vars.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Added `--card-header-bg` and `--card-footer-bg` CSS variables (with `$card-header-bg` and `$card-footer-bg` Sass defaults) so `.card-header` and `.card-footer` backgrounds can be overridden independently, and made `.card-header` transparent by default instead of using `--card-cap-bg`.
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index 2f7be8444..0d8ad01a3 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -1241,6 +1241,8 @@ $card-cap-padding-y: $card-spacer-y !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-cap-bg: var(--bg-surface-tertiary) !default;
 $card-cap-color: inherit !default;
+$card-header-bg: transparent !default;
+$card-footer-bg: null !default;
 $card-height: null !default;
 $card-color: inherit !default;
 $card-bg: var(--bg-surface) !default;
diff --git a/core/scss/bootstrap/_card.scss b/core/scss/bootstrap/_card.scss
index cb90290a9..a2e96f600 100644
--- a/core/scss/bootstrap/_card.scss
+++ b/core/scss/bootstrap/_card.scss
@@ -106,10 +106,13 @@
 //
 
 .card-header {
+  @if $card-header-bg != null {
+    --card-header-bg: #{$card-header-bg};
+  }
   padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
   margin-bottom: 0; // Removes the default margin-bottom of <hN>
   color: var(--card-cap-color);
-  background-color: var(--card-cap-bg);
+  background-color: var(--card-header-bg, var(--card-cap-bg));
   border-bottom: var(--card-border-width) solid var(--card-border-color);
 
   &:first-child {
@@ -118,9 +121,12 @@
 }
 
 .card-footer {
+  @if $card-footer-bg != null {
+    --card-footer-bg: #{$card-footer-bg};
+  }
   padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
   color: var(--card-cap-color);
-  background-color: var(--card-cap-bg);
+  background-color: var(--card-footer-bg, var(--card-cap-bg));
   border-top: var(--card-border-width) solid var(--card-border-color);
 
   &:last-child {
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index d746cb813..3aec2efc7 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -221,7 +221,7 @@ Stacked card
   display: flex;
   align-items: center;
   color: inherit;
-  background-color: var(--card-cap-bg);
+  background-color: var(--card-header-bg, var(--card-cap-bg));
 
   &:first-child {
     @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);