11 CSS Header Designs 11 / 11

Shrinking Header on Scroll

A large expressive bar on load that smoothly compacts into a floating pill as you scroll, powered by CSS scroll-driven animation (animation-timeline:scroll()) interpolating height, padding, logo size, blur and corner radius — no JS scroll listeners, with an @supports fallback to a compact bar.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="csh-11">
  <div class="csh-11__scroll">
    <header class="csh-11__header">
      <div class="csh-11__bar">
        <a href="#" class="csh-11__logo"><span class="csh-11__mark">▲</span><span>Ascend<small>SCROLL TO SHRINK</small></span></a>
        <nav class="csh-11__nav">
          <a href="#">Product</a>
          <a href="#">Method</a>
          <a href="#">Stories</a>
          <a href="#">Pricing</a>
          <a href="#" class="csh-11__cta">Launch →</a>
        </nav>
      </div>
    </header>

    <section class="csh-11__hero">
      <div>
        <div class="csh-11__eyebrow">animation-timeline: scroll()</div>
        <h1>Big on load.<br><em>Compact on scroll.</em></h1>
        <p>PURE CSS SCROLL-DRIVEN ANIMATION — NO LISTENERS</p>
      </div>
      <div class="csh-11__bob">↓ SCROLL ↓</div>
    </section>

    <section class="csh-11__content">
      <div class="csh-11__card"><span>01 / SCROLL TIMELINE</span><h2>The bar consumes a scroll() timeline</h2><p>As the scroller advances through its first 220px, the header animation interpolates height, padding, logo size, blur and corner radius — collapsing the expressive bar into a floating pill.</p></div>
      <div class="csh-11__card"><span>02 / NO JANK</span><h2>Off the main thread</h2><p>Because there is no scroll event handler, the shrink runs on the compositor and never blocks interaction or trips Cumulative Layout Shift.</p></div>
      <div class="csh-11__card"><span>03 / GRACEFUL FALLBACK</span><h2>@supports safety net</h2><p>Browsers without scroll-driven animation simply render the compact bar by default, so the layout stays correct everywhere.</p></div>
    </section>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Azeret+Mono:wght@400;500&display=swap');

.csh-11, .csh-11 *, .csh-11 *::before, .csh-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-11 ::selection{background:var(--volt);color:var(--abyss)}
.csh-11 ::-moz-selection{background:var(--volt);color:var(--abyss)}

.csh-11{
  --abyss:#070a16;
  --foam:#eaf2ff;
  --volt:#7c5cff;
  --aqua:#22e0c4;
  --rose:#ff5e8a;
  font-family:'Unbounded',sans-serif;
  background:var(--abyss);color:var(--foam);
  min-height:100vh;position:relative;
}
/* Scroll-driven shrink: the inner scroller exposes a scroll() timeline that an
   animation on the header consumes — big expressive bar collapses into a compact
   pill in the first slice of scroll. No JS scroll listeners. */
.csh-11__scroll{height:100vh;overflow-y:scroll;position:relative;scroll-behavior:smooth;
  animation:csh-11-shrink linear both;animation-timeline:scroll(self);animation-range:0 220px}
.csh-11__scroll::-webkit-scrollbar{width:0}
@keyframes csh-11-shrink{
  0%  {--h:108px;--pad:0px;--logo:2rem;--bg:0;--blur:0px;--radius:0px;--mx:0px;--bar:1}
  100%{--h:62px; --pad:14px;--logo:1.25rem;--bg:.8;--blur:18px;--radius:18px;--mx:18px;--bar:0}
}
.csh-11{--h:108px;--pad:0px;--logo:2rem;--bg:0;--blur:0px;--radius:0px;--mx:0px;--bar:1}

.csh-11__header{position:sticky;top:0;z-index:50;padding:var(--pad) var(--mx)}
.csh-11__bar{
  height:var(--h);display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,5vw,48px);max-width:1280px;margin:0 auto;
  background:rgba(7,10,22,var(--bg));backdrop-filter:blur(var(--blur)) saturate(150%);
  border-radius:var(--radius);border:1px solid rgba(234,242,255,calc(var(--bg) * .14));
  transition:none}
.csh-11__logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.03em;text-decoration:none;color:var(--foam);font-size:var(--logo)}
.csh-11__mark{width:calc(var(--logo) * 1.5);height:calc(var(--logo) * 1.5);border-radius:30%;background:linear-gradient(135deg,var(--volt),var(--aqua));display:grid;place-items:center;color:var(--abyss);font-size:calc(var(--logo) * .7);flex:0 0 auto}
.csh-11__logo small{font-family:'Azeret Mono',monospace;font-size:.55rem;letter-spacing:.3em;color:var(--aqua);opacity:var(--bar);transition:opacity .2s;display:block}
.csh-11__nav{display:flex;gap:4px;align-items:center}
.csh-11__nav a{position:relative;text-decoration:none;color:rgba(234,242,255,.78);font-size:.92rem;font-weight:400;padding:9px 15px;border-radius:9px;transition:color .25s,background .25s;font-family:'Azeret Mono',monospace}
.csh-11__nav a::after{content:'';position:absolute;left:15px;right:15px;bottom:5px;height:2px;background:var(--aqua);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.csh-11__nav a:hover{color:var(--foam)}
.csh-11__nav a:hover::after{transform:scaleX(1)}
.csh-11__cta{background:var(--volt);color:var(--foam);padding:10px 20px;border-radius:30px;text-decoration:none;font-family:'Azeret Mono',monospace;font-size:.8rem;font-weight:500;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.csh-11__nav a.csh-11__cta::after{display:none}
.csh-11__nav a.csh-11__cta:hover{transform:translateY(-2px);color:var(--foam)}

.csh-11__hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 24px;position:relative;
  background:radial-gradient(60% 60% at 50% 0%,rgba(124,92,255,.16),transparent 60%),radial-gradient(40% 50% at 85% 90%,rgba(34,224,196,.12),transparent 60%)}
.csh-11__eyebrow{font-family:'Azeret Mono',monospace;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--aqua);margin-bottom:24px}
.csh-11__hero h1{font-size:clamp(2.4rem,8vw,5.5rem);font-weight:800;line-height:.96;letter-spacing:-.03em}
.csh-11__hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--volt),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.csh-11__hero p{font-family:'Azeret Mono',monospace;margin-top:22px;font-size:.76rem;letter-spacing:.18em;color:rgba(234,242,255,.5)}
.csh-11__bob{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(234,242,255,.45);animation:csh-11-bob 2s ease-in-out infinite}
@keyframes csh-11-bob{50%{transform:translateX(-50%) translateY(8px)}}
.csh-11__content{padding:6vh clamp(24px,8vw,140px);max-width:1000px;margin:0 auto;display:grid;gap:30px}
.csh-11__card{background:rgba(234,242,255,.03);border:1px solid rgba(234,242,255,.08);border-radius:18px;padding:30px}
.csh-11__card span{font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--rose)}
.csh-11__card h2{font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:600;margin:10px 0 10px;letter-spacing:-.02em}
.csh-11__card p{font-family:'Azeret Mono',monospace;color:rgba(234,242,255,.6);line-height:1.7;font-size:.86rem}

/* Fallback for browsers without scroll-driven animations: a smaller fixed bar */
@supports not (animation-timeline: scroll()){
  .csh-11{--h:72px;--bg:.8;--blur:18px;--radius:18px;--mx:14px;--pad:10px;--logo:1.4rem}
  .csh-11__bar{transition:none}
}
@media (max-width:720px){.csh-11__nav a:not(.csh-11__cta){display:none}}
@media (prefers-reduced-motion: reduce){
  .csh-11__scroll{animation:none !important;--h:72px;--bg:.8;--blur:18px;--radius:18px;--mx:14px;--pad:10px;--logo:1.4rem}
  .csh-11__bob{animation:none !important}
}

More from 11 CSS Header Designs

Pure CSS Fixed Navigation (Sticky Header)CSS Grid Mega Menu HeaderFull-Screen Overlay Hamburger HeaderGlassmorphism Transparent HeaderHeader with Announcement BarTwo-Tier Double-Decker HeaderAnimated Link Hover Effects HeaderVertical Sidebar Navigation HeaderMulti-Level Dropdown Menu HeaderFlexbox 3-Column Navbar Header
View the full collection →

Search CodeFronts

Loading…

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