diff --git a/src/components/head/page-head-colors.webc b/src/components/head/page-head-colors.webc
index dddc81e..bd14db9 100644
--- a/src/components/head/page-head-colors.webc
+++ b/src/components/head/page-head-colors.webc
@@ -40,7 +40,7 @@
     --clr-box-background: var(--theme-c-primary-150);
     --clr-box-border: var(--theme-c-primary-250);
     --clr-box-shadow: var(--theme-c-primary-200);
-    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
+    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.3) c h);
     --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
 
     --clr-color-box-background: var(--theme-c-primary-200);
diff --git a/src/components/quick-info.webc b/src/components/quick-info.webc
index abf6d2a..75ddd3e 100644
--- a/src/components/quick-info.webc
+++ b/src/components/quick-info.webc
@@ -26,16 +26,18 @@
   }
 
   :host::before {
-    --gradient-start: var(--clr-quick-info-gradient-start);
-    --gradient-end: var(--clr-quick-info-gradient-end);
+    --gradient-dir: ellipse at bottom right;
+    --gradient-start: var(--clr-quick-info-gradient-end);
+    --gradient-end: var(--clr-quick-info-gradient-start);
 
     content: '';
     position: absolute;
     inset: var(--border-thin);
-    background: linear-gradient(
+
+    background: radial-gradient(
       var(--gradient-dir),
-      var(--gradient-start) 0%,
-      var(--gradient-end) 50%
+      var(--gradient-start) 70%,
+      var(--gradient-end) 100%
     );
     border-radius: inherit;
     z-index: -1;
diff --git a/src/components/trait-card.webc b/src/components/trait-card.webc
index 46983f9..162c7c9 100644
--- a/src/components/trait-card.webc
+++ b/src/components/trait-card.webc
@@ -79,17 +79,18 @@
   }
 
   :host .content::before {
-    --gradient-start: var(--clr-quick-info-gradient-start);
-    --gradient-end: var(--clr-quick-info-gradient-end);
+    --gradient-dir: ellipse at bottom right;
+    --gradient-start: var(--clr-quick-info-gradient-end);
+    --gradient-end: var(--clr-quick-info-gradient-start);
 
     content: '';
     position: absolute;
     inset: var(--border-thin);
 
-    background: linear-gradient(
+    background: radial-gradient(
       var(--gradient-dir),
-      var(--gradient-start) 0%,
-      var(--gradient-end) 50%
+      var(--gradient-start) 70%,
+      var(--gradient-end) 100%
     );
 
     border-radius: inherit;