CSS Banners & Alerts 02 / 14

Sticky Top Announcement Banner CSS

Three stackable sticky top announcement banners in a retro-futuristic terminal / neon aesthetic — deep space background, cyan / magenta / amber neon variants with layered glow effects, scanline texture overlay, and blinking live-indicator dots.

Best forSaaS dashboards, product announcements, status pages, cyberpunk-themed UIs.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ba-stk" aria-label="Sticky top announcement banner demo">
  <div class="banner-stack">
    <div class="banner banner--system" data-ba-stk-banner="b-system">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">SYS</span>
          <span class="banner-msg"><strong>DEGRADED:</strong> API latency elevated — P95 response times +340ms · Engineers paged · Tracking INC-8821</span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Status page ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-system" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>

    <div class="banner banner--promo" data-ba-stk-banner="b-promo">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">PROMO</span>
          <span class="banner-msg"><strong>40% OFF</strong> Pro tier — expires 23:59 UTC tonight · Code <strong>LAUNCH40</strong></span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Claim offer ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-promo" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>

    <div class="banner banner--warning" data-ba-stk-banner="b-warning">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">WARN</span>
          <span class="banner-msg"><strong>Browser outdated —</strong> some features require Chrome 120+ or Firefox 121+ to function correctly</span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Update now ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-warning" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>
  </div>

  <nav class="page-nav" aria-label="Demo navigation">
    <span class="nav-logo">NEXUS</span>
    <ul class="nav-links">
      <li><a href="#">Dashboard</a></li><li><a href="#">Analytics</a></li><li><a href="#">Deploy</a></li><li><a href="#">Docs</a></li>
    </ul>
  </nav>

  <div class="page-content">
    <h2>Sticky Top<br>Announcement<br>Banner CSS</h2>
    <p>Scroll the surrounding page to see the banners remain pinned. Dismiss each one to watch the stack collapse gracefully.</p>
    <div class="card-grid" aria-hidden="true">
      <div class="card"><span>Panel 01</span></div><div class="card"><span>Panel 02</span></div><div class="card"><span>Panel 03</span></div>
      <div class="card"><span>Panel 04</span></div><div class="card"><span>Panel 05</span></div><div class="card"><span>Panel 06</span></div>
    </div>
  </div>
</section>
/* ─── 02 Sticky Top Announcement Banner — neon terminal ──────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&display=swap');

.ba-stk {
  --ba-stk-bg: #060810;
  --ba-stk-surface: #0c1020;
  --ba-stk-cyan: #00f5d4;
  --ba-stk-magenta: #f500a0;
  --ba-stk-amber: #ffb800;
  --ba-stk-text: #e0e8ff;
  --ba-stk-muted: rgba(224,232,255,0.45);

  position: relative;
  width: 100%;
  height: 560px;
  background: var(--ba-stk-bg);
  background-image: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,245,212,0.08) 0%, transparent 60%), linear-gradient(180deg, #060810 0%, #080d18 100%);
  font-family: 'Space Mono', monospace;
  color: var(--ba-stk-text);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.ba-stk *, .ba-stk *::before, .ba-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-stk .banner-stack { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; }
.ba-stk .banner { width: 100%; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; max-height: 80px; }
.ba-stk .banner.hidden { max-height: 0; opacity: 0; pointer-events: none; }
.ba-stk .banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; height: 48px; border-bottom: 1px solid; position: relative; overflow: hidden; }
.ba-stk .banner-inner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px); pointer-events: none; }
.ba-stk .banner-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; overflow: hidden; }
.ba-stk .banner-badge { font-family: 'Bebas Neue', sans-serif; font-size: 11px; letter-spacing: 0.15em; padding: 3px 8px; border: 1px solid currentColor; flex-shrink: 0; line-height: 1.4; }
.ba-stk .banner-msg { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ba-stk .banner-msg strong { font-weight: 700; margin-right: 6px; }
.ba-stk .banner-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ba-stk .banner-cta { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border: 1px solid currentColor; background: transparent; cursor: pointer; text-decoration: none; transition: all 0.2s ease; }
.ba-stk .banner-close { background: transparent; border: none; cursor: pointer; padding: 4px; display: flex; opacity: 0.5; transition: opacity 0.2s; color: currentColor; }
.ba-stk .banner-close:hover { opacity: 1; }
.ba-stk .banner-close svg { width: 14px; height: 14px; }
.ba-stk .blink { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; animation: ba-stk-blink 1.2s step-end infinite; flex-shrink: 0; }
@keyframes ba-stk-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.ba-stk .banner--system { background: rgba(0,245,212,0.06); border-bottom-color: rgba(0,245,212,0.3); }
.ba-stk .banner--system .banner-inner { border-bottom-color: rgba(0,245,212,0.3); }
.ba-stk .banner--system .banner-badge, .ba-stk .banner--system .banner-msg, .ba-stk .banner--system .blink, .ba-stk .banner--system .banner-close, .ba-stk .banner--system .banner-cta { color: var(--ba-stk-cyan); }
.ba-stk .banner--system .banner-cta { border-color: rgba(0,245,212,0.6); }
.ba-stk .banner--system .banner-cta:hover { background: rgba(0,245,212,0.12); }

.ba-stk .banner--promo { background: rgba(245,0,160,0.06); border-bottom-color: rgba(245,0,160,0.3); }
.ba-stk .banner--promo .banner-inner { border-bottom-color: rgba(245,0,160,0.3); }
.ba-stk .banner--promo .banner-badge, .ba-stk .banner--promo .banner-msg, .ba-stk .banner--promo .blink, .ba-stk .banner--promo .banner-close, .ba-stk .banner--promo .banner-cta { color: var(--ba-stk-magenta); }
.ba-stk .banner--promo .banner-cta { border-color: rgba(245,0,160,0.6); }
.ba-stk .banner--promo .banner-cta:hover { background: rgba(245,0,160,0.1); }

.ba-stk .banner--warning { background: rgba(255,184,0,0.05); border-bottom-color: rgba(255,184,0,0.3); }
.ba-stk .banner--warning .banner-inner { border-bottom-color: rgba(255,184,0,0.3); }
.ba-stk .banner--warning .banner-badge, .ba-stk .banner--warning .banner-msg, .ba-stk .banner--warning .blink, .ba-stk .banner--warning .banner-close, .ba-stk .banner--warning .banner-cta { color: var(--ba-stk-amber); }
.ba-stk .banner--warning .banner-cta { border-color: rgba(255,184,0,0.6); }
.ba-stk .banner--warning .banner-cta:hover { background: rgba(255,184,0,0.1); }

.ba-stk .page-nav { background: rgba(12,16,32,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); height: 56px; display: flex; align-items: center; padding: 0 24px; gap: 24px; }
.ba-stk .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.12em; color: var(--ba-stk-cyan); text-shadow: 0 0 12px rgba(0,245,212,0.6); }
.ba-stk .nav-links { display: flex; gap: 20px; list-style: none; }
.ba-stk .nav-links a { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ba-stk-muted); text-decoration: none; transition: color 0.2s; }
.ba-stk .nav-links a:hover { color: var(--ba-stk-text); }

.ba-stk .page-content { padding: 64px 24px; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.ba-stk .page-content h2 { font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 0.05em; line-height: 1; color: var(--ba-stk-text); }
.ba-stk .page-content p { font-size: 13px; line-height: 1.9; color: var(--ba-stk-muted); max-width: 520px; }
.ba-stk .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ba-stk .card { background: var(--ba-stk-surface); border: 1px solid rgba(255,255,255,0.06); padding: 20px; height: 100px; display: flex; align-items: flex-end; }
.ba-stk .card span { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.25); }

@media (prefers-reduced-motion: reduce) { .ba-stk .blink { animation: none; } .ba-stk .banner { transition: opacity 0.2s; } }
(() => {
  const root = document.querySelector('.ba-stk');
  if (!root) return;
  root.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-ba-stk-close]');
    if (!btn) return;
    const id = btn.dataset.baStkClose;
    const el = root.querySelector('[data-ba-stk-banner="' + id + '"]');
    if (el) el.classList.add('hidden');
  });
})();

More from CSS Banners & Alerts

Inline Form Validation Alert CSSCSS Pulsing Banner for Live UpdatesMinimalist Border Left CSS AlertResponsive Full Width Hero Banner CSSMaterial Design Floating Alert CardCSS Text Wrap Banner with Long StringsDismissible CSS Alert with Close ButtonCSS Cookie Consent Banner BottomCSS Alert Banner with Icon AlignmentCSS Toast Notification Alert Top RightCSS Banner with Diagonal Slash BackgroundCSS Gradient Animated Border Alert
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →