diff --git a/apps/web/src/components/chat/ComposerBannerStack.test.tsx b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
index 520f130416a1542367eb1939a7e4d731c793a327..1b592168c20d5832c93bab87be2320a91ee16c0b 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.test.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
@@ -33,6 +33,10 @@ describe("ComposerBannerStack", () => {
     const markup = renderToStaticMarkup(<ComposerBannerStack items={[banner("front")]} />);
 
     expect(markup).not.toContain("data-composer-banner-stack-expanded-items");
+    expect(markup).toContain("alert-glass");
+    expect(markup).toContain('data-variant="warning"');
+    expect(markup).toContain("transform:none");
+    expect(markup).not.toContain("will-change:transform");
   });
 
   it("applies item-specific surface and action layout classes", () => {
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index 0b9acbcc99713767af6d721f0a635e3134fac124..3f8f56f041a64342613b9d51efa54d72752c1743 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -16,11 +16,10 @@ const stackedExitStyle = {
 } satisfies CSSProperties;
 const restingStyle = {
   opacity: 1,
-  transform: "translate3d(0, 0, 0)",
+  transform: "none",
 } satisfies CSSProperties;
 const exitTransitionStyle = {
   transition: `transform ${DISMISS_TRANSITION_MS}ms ease-in, opacity ${DISMISS_TRANSITION_MS}ms ease-in`,
-  willChange: "transform, opacity",
 } satisfies CSSProperties;
 
 export interface ComposerBannerStackItem {
@@ -173,7 +172,11 @@ function ComposerBannerStackAlert({
   const dismissOnly = item.onDismiss && !item.actions;
 
   return (
-    <Alert variant={item.variant} className={item.className}>
+    <Alert
+      variant={item.variant}
+      className={cn("alert-glass", item.className)}
+      data-variant={item.variant}
+    >
       {item.icon}
       <AlertTitle>{item.title}</AlertTitle>
       {item.description ? <AlertDescription>{item.description}</AlertDescription> : null}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 70614beb9f46a08f0006860368717a49b081e649..87b8755f4c19a420a4b3682f376cbd1f08240a84 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -375,6 +375,35 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     backdrop-filter: blur(16px);
   }
 
+  .alert-glass {
+    --alert-glass-tint: transparent;
+
+    background:
+      linear-gradient(
+        color-mix(in srgb, var(--alert-glass-tint) 4%, transparent),
+        color-mix(in srgb, var(--alert-glass-tint) 4%, transparent)
+      ),
+      color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important;
+    -webkit-backdrop-filter: blur(16px) saturate(1.1);
+    backdrop-filter: blur(16px) saturate(1.1);
+  }
+
+  .alert-glass[data-variant="error"] {
+    --alert-glass-tint: var(--destructive);
+  }
+
+  .alert-glass[data-variant="info"] {
+    --alert-glass-tint: var(--info);
+  }
+
+  .alert-glass[data-variant="success"] {
+    --alert-glass-tint: var(--success);
+  }
+
+  .alert-glass[data-variant="warning"] {
+    --alert-glass-tint: var(--warning);
+  }
+
   .dropdown-glass,
   .dialog-glass,
   .workflow-dialog-surface,
@@ -566,6 +595,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
 
   @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
     .chat-composer-glass,
+    .alert-glass {
+      background: var(--background) !important;
+    }
+
     .chat-composer-glass-host {
       background: var(--background);
     }