diff --git a/src/components/account-info.css b/src/components/account-info.css
index 5477f261..c33e68cf 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -433,6 +433,16 @@
     filter: blur(16px) opacity(0.2);
   }
 }
+@keyframes surface-header {
+  0% {
+    border-bottom-color: transparent;
+    box-shadow: none;
+  }
+  100% {
+    border-bottom-color: var(--outline-color);
+    box-shadow: 0 8px 16px -8px var(--drop-shadow-color);
+  }
+}
 @keyframes shrink-avatar {
   0% {
     width: 64px;
@@ -489,6 +499,18 @@
       animation-range: contain 100% cover 100%;
     }
 
+    header {
+      background-image: linear-gradient(
+        to bottom,
+        transparent 30%,
+        var(--bg-color) var(--banner-overlap)
+      );
+      border-bottom: 1px solid transparent;
+      animation: surface-header 1s linear both;
+      animation-timeline: --account-scroll;
+      animation-range: 0 150px;
+    }
+
     header .avatar {
       animation: shrink-avatar 1s linear both;
       animation-timeline: --account-scroll;