diff --git a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs
index 7b7ee5b7497..6a174ed7a6c 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs
@@ -13,8 +13,8 @@
       @model={{sectionLink.model}}
       @prefixType={{sectionLink.prefixType}}
       @prefixValue={{sectionLink.prefixValue}}
-      @prefixCSS={{sectionLink.prefixCSS}}
-      @prefixColor={{sectionLink.prefixColor}} >
+      @prefixColor={{sectionLink.prefixColor}}
+      @prefixElementColors={{sectionLink.prefixElementColors}} >
     </Sidebar::SectionLink>
   {{/each}}
 
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs
index 3af9d14f7e1..31c5ec67489 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs
@@ -15,9 +15,8 @@
     {{/if}}
 
     {{#if (eq @prefixType "span")}}
-      <span style={{html-safe @prefixCSS}} class="prefix-span"></span>
+      <span style={{html-safe (concat "background: linear-gradient(90deg, " @prefixElementColors ")")}} class="prefix-span"></span>
     {{/if}}
-
     {{#if @prefixBadge}}
       {{d-icon @prefixBadge class="prefix-badge"}}
     {{/if}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs
index 0cc9938e761..c29385e2c0c 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs
@@ -6,7 +6,8 @@
           @prefixType={{@prefixType}}
           @prefixValue={{@prefixValue}}
           @prefixCSSClass={{@prefixCSSClass}}
-          @prefixCSS={{this.prefixCSS}}
+          @prefixColor={{this.prefixColor}}
+          @prefixElementColors={{this.prefixElementColors}}
           @prefixBadge={{@prefixBadge}}
         />
 
@@ -28,8 +29,8 @@
           @prefixType={{@prefixType}}
           @prefixValue={{@prefixValue}}
           @prefixCSSClass={{@prefixCSSClass}}
-          @prefixCSS={{this.prefixCSS}}
           @prefixColor={{this.prefixColor}}
+          @prefixElementColors={{this.prefixElementColors}}
           @prefixBadge={{@prefixBadge}}
         />
 
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
index 6155739c724..e472e99ac7f 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
@@ -51,7 +51,13 @@ export default class SectionLink extends Component {
     return "#" + color;
   }
 
-  get prefixCSS() {
-    return this.args.prefixCSS;
+  get prefixElementColors() {
+    const prefixElementColors = this.args.prefixElementColors.filter((color) =>
+      color?.match(/^\w{6}$/)
+    );
+    if (prefixElementColors.length === 1) {
+      prefixElementColors.push(prefixElementColors[0]);
+    }
+    return prefixElementColors.map((color) => `#${color} 50%`).join(", ");
   }
 }
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs
index 2d40a988837..06470cf81e3 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs
@@ -19,8 +19,8 @@
         @prefixBadge={{sectionLink.prefixBadge}}
         @prefixType={{sectionLink.prefixType}}
         @prefixValue={{sectionLink.prefixValue}}
-        @prefixCSS={{sectionLink.prefixCSS}}
-        @prefixColor={{sectionLink.prefixColor}} >
+        @prefixColor={{sectionLink.prefixColor}}
+        @prefixElementColors={{sectionLink.prefixElementColors}} >
       </Sidebar::SectionLink>
     {{/each}}
   {{else}}
diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js
index e7172d5f040..8af34cdb3fd 100644
--- a/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js
+++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js
@@ -52,12 +52,8 @@ export default class CategorySectionLink {
     return "span";
   }
 
-  get prefixCSS() {
-    if (this.category.parentCategory) {
-      return `background: linear-gradient(90deg, #${this.category.parentCategory.color} 50%, #${this.category.color} 50%)`;
-    } else {
-      return `background: #${this.category.color}`;
-    }
+  get prefixElementColors() {
+    return [this.category.parentCategory?.color, this.category.color];
   }
 
   get prefixColor() {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
index 42a99598831..d69611fec94 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
@@ -197,7 +197,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
 
     assert.ok(
       exists(
-        `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix .prefix-span[style="background: #${category1.color}"]`
+        `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix .prefix-span[style="background: linear-gradient(90deg, #${category1.color} 50%, #${category1.color} 50%)"]`
       ),
       "category1 section link is rendered with solid prefix icon color"
     );