diff --git a/src/panel-triggers/components/AlertList/AlertCard.tsx b/src/panel-triggers/components/AlertList/AlertCard.tsx
index a7345f8..a25f658 100644
--- a/src/panel-triggers/components/AlertList/AlertCard.tsx
+++ b/src/panel-triggers/components/AlertList/AlertCard.tsx
@@ -66,7 +66,7 @@ export default class AlertCard extends PureComponent<AlertCardProps, AlertCardSt
 
     const cardStyle: CSSProperties = {};
     if (panelOptions.highlightBackground) {
-      cardStyle.background = severityDesc.color;
+      cardStyle.backgroundColor = severityDesc.color;
     }
 
     return (
diff --git a/src/sass/_panel-triggers.scss b/src/sass/_panel-triggers.scss
index f06e6a4..fdc9e87 100644
--- a/src/sass/_panel-triggers.scss
+++ b/src/sass/_panel-triggers.scss
@@ -119,6 +119,7 @@
 
 .zbx-trigger-highlighted {
   color: $zbx-text-highlighted;
+  background: linear-gradient(135deg, $zbx-card-background-start, $zbx-card-background-stop);
 
   .alert-rule-item__body,
   .alert-rule-item__header,
diff --git a/src/sass/_variables.dark.scss b/src/sass/_variables.dark.scss
index 57eb3a2..4c53ba1 100644
--- a/src/sass/_variables.dark.scss
+++ b/src/sass/_variables.dark.scss
@@ -3,6 +3,8 @@ $regex: #d69e2e;
 $zbx-tag-color: $gray-5;
 $zbx-text-highlighted: $white;
 $zbx-text-color-disabled: $gray-1;
+$zbx-card-background-start: #2f2f321f;
+$zbx-card-background-stop: #262628c7;
 
 $action-button-color: $blue-dark;
 $action-button-text-color: $gray-4;
diff --git a/src/sass/_variables.light.scss b/src/sass/_variables.light.scss
index 0b7680c..8e56dad 100644
--- a/src/sass/_variables.light.scss
+++ b/src/sass/_variables.light.scss
@@ -3,6 +3,8 @@ $regex: #d69e2e;
 $zbx-tag-color: $gray-6;
 $zbx-text-highlighted: $black;
 $zbx-text-color-disabled: $gray-3;
+$zbx-card-background-start: #e9edf257;
+$zbx-card-background-stop: #dde4edff;
 
 $action-button-color: #497dc0;
 $action-button-text-color: $gray-6;