diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss
index 4e2a85df91..e5ea78624d 100755
--- a/core/src/components/card/card.ios.scss
+++ b/core/src/components/card/card.ios.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --background: var(--ion-item-background, transparent);
+  --background: #{$item-ios-background};
   --color: #{$card-ios-text-color};
 
   @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss
index a910f6f625..0258feb280 100755
--- a/core/src/components/card/card.md.scss
+++ b/core/src/components/card/card.md.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --background: var(--ion-item-background, transparent);
+  --background: #{$item-md-background};
   --color: #{$card-md-text-color};
 
   @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);