diff --git a/data/styles/Banner.scss b/data/styles/Banner.scss
index 0df42c0a3..ad77f89b2 100644
--- a/data/styles/Banner.scss
+++ b/data/styles/Banner.scss
@@ -3,6 +3,9 @@
  * SPDX-FileCopyrightText: 2017-2024 elementary, Inc. (https://elementary.io)
  */
 
+@define-color banner_bg_color #{'mix(@accent_color, @bg_color, 0.8)'};
+@define-color banner_fg_color #{'mix(@accent_color, @text_color, 0.85)'};
+
 .banner {
     background-color: #{'@banner_bg_color'};
     background-image:
diff --git a/src/Views/AppInfoView.vala b/src/Views/AppInfoView.vala
index 8b676ea76..3b1fe2c06 100644
--- a/src/Views/AppInfoView.vala
+++ b/src/Views/AppInfoView.vala
@@ -20,6 +20,11 @@
 public class AppCenter.Views.AppInfoView : Adw.NavigationPage {
     public const int MAX_WIDTH = 800;
 
+    private const string BANNER_STYLE_CSS = """
+        @define-color banner_bg_color %s;
+        @define-color banner_fg_color %s;
+    """;
+
     public signal void show_other_package (AppCenterCore.Package package);
 
     public AppCenterCore.Package package { get; construct set; }
@@ -124,8 +129,8 @@ public class AppCenter.Views.AppInfoView : Adw.NavigationPage {
 
         accent_provider = new Gtk.CssProvider ();
         try {
-            string bg_color = DEFAULT_BANNER_COLOR_PRIMARY;
-            string text_color = DEFAULT_BANNER_COLOR_PRIMARY_TEXT;
+            string bg_color = "mix(@accent_color, @bg_color, 0.8)";
+            string text_color = "mix(@accent_color, @text_color, 0.85)";
 
             var accent_css = "";
             if (package != null) {
diff --git a/src/Widgets/Banner.vala b/src/Widgets/Banner.vala
index 8e9d3c2e7..ae9e818b5 100644
--- a/src/Widgets/Banner.vala
+++ b/src/Widgets/Banner.vala
@@ -17,13 +17,6 @@
  * Authored by: Nathan Dyer <mail@nathandyer.me>
  */
 
-const string BANNER_STYLE_CSS = """
-    @define-color banner_bg_color %s;
-    @define-color banner_fg_color %s;
-""";
-
-const string DEFAULT_BANNER_COLOR_PRIMARY = "mix(@accent_color, @bg_color, 0.8)";
-const string DEFAULT_BANNER_COLOR_PRIMARY_TEXT = "mix(@accent_color, @text_color, 0.85)";
 const int MILLISECONDS_BETWEEN_BANNER_ITEMS = 5000;
 
 public class AppCenter.Widgets.Banner : Gtk.Button {
@@ -56,7 +49,6 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
         );
     }
 
-
     construct {
         var name_label = new Gtk.Label (name) {
             max_width_chars = 50,
@@ -111,24 +103,65 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
         hexpand = true;
         child = outer_box;
 
-        var provider = new Gtk.CssProvider ();
-        try {
-            string bg_color = DEFAULT_BANNER_COLOR_PRIMARY;
-            string text_color = DEFAULT_BANNER_COLOR_PRIMARY_TEXT;
-
-            if (brand_color != null) {
-                var bg_rgba = Gdk.RGBA ();
-                bg_rgba.parse (brand_color);
+        if (brand_color != null) {
+            set_accent_color (brand_color, this);
+        }
+    }
 
-                bg_color = brand_color;
-                text_color = Granite.contrasting_foreground_color (bg_rgba).to_string ();
-            }
+    private static Gee.HashMap<string, Gtk.CssProvider>? providers;
+    public static void set_accent_color (string color, Gtk.Widget widget) {
+        if (providers == null) {
+            providers = new Gee.HashMap<string, Gtk.CssProvider> ();
+        }
 
-            var colored_css = BANNER_STYLE_CSS.printf (bg_color, text_color);
-            provider.load_from_string (colored_css);
-            get_style_context ().add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-        } catch (GLib.Error e) {
-            critical ("Unable to set accent color: %s", e.message);
+        var color_class = color.replace ("#", "");
+        widget.add_css_class (color_class);
+
+        if (!providers.has_key (color)) {
+            var bg_rgba = Gdk.RGBA ();
+            bg_rgba.parse (color);
+
+            var text_color = Granite.contrasting_foreground_color (bg_rgba).to_string ();
+
+            string style = @"
+                .banner.$color_class {
+                    background-color: $color;
+                    background-image:
+                        linear-gradient(
+                            to bottom right,
+                            shade($color, 1.05),
+                            shade($color, 0.95)
+                        );
+                    color: $text_color;
+
+                    border: 1px solid shade($color, 0.8);
+                    box-shadow:
+                        inset 0 0 0 1px alpha(shade($color, 1.7), 0.05),
+                        inset 0 1px 0 0 alpha(shade($color, 1.7), 0.45),
+                        inset 0 -1px 0 0 alpha(shade($color, 1.7), 0.15),
+                        0 3px 2px -1px alpha(shade($color, 0.5), 0.2),
+                        0 3px 5px alpha(shade($color, 0.5), 0.15);
+                }
+
+                .banner.$color_class:hover {
+                    box-shadow:
+                        inset 0 0 0 1px alpha(shade($color, 1.7), 0.05),
+                        inset 0 1px 0 0 alpha(shade($color, 1.7), 0.45),
+                        inset 0 -1px 0 0 alpha(shade($color, 1.7), 0.15),
+                        0 10px 8px -11px alpha(shade($color, 0.6), 0.8),
+                        0 8px 12px alpha(shade($color, 0.8), 0.6);
+                }
+            ";
+
+            var style_provider = new Gtk.CssProvider ();
+            style_provider.load_from_string (style);
+
+            providers[color] = style_provider;
+            Gtk.StyleContext.add_provider_for_display (
+                Gdk.Display.get_default (),
+                providers[color],
+                Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+            );
         }
     }
 }