navbar scroll pill morph scroll-timeline glass backdrop-filter landing page sticky navigation hero section with transparent-to-pill nav transition marketing site header that collapses on scroll scroll-event-based navbar requires JavaScript CSS-only scroll-linked morph without layout shift graceful fallback for browsers lacking scroll-timeline
Pill Nav Morph
Fetch snippet JSON:
curl https://webspire.de/snippets/scroll/pill-nav-morph.json Preview
Background
Customize
Quick Start
<nav class="pill-nav fixed top-4 left-1/2 -translate-x-1/2 z-50 px-6 py-3">...</nav>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- @supports fallback
- Size
- 1243 bytes · 37 lines
- Custom Properties
-
--pill-nav-max-w--pill-nav-radius--pill-nav-bg--pill-nav-border--pill-nav-shadow--pill-nav-blur - Classes
-
.pill-nav
navbar scroll pill morph scroll-timeline glass backdrop-filter
Uses animation-timeline: scroll(root) with animation-range: 0px 120px so the morphing is precisely tied to the page scroll offset — no JavaScript, no scroll event listeners. The @supports guard wraps the progressive enhancement so older browsers fall back to the fully-morphed pill style immediately.
Basic sticky nav
<nav class="pill-nav fixed top-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-6 px-6 py-3">
<a href="/" class="font-bold text-slate-800">Brand</a>
<a href="#features" class="text-sm text-slate-600 hover:text-slate-900">Features</a>
<a href="#pricing" class="text-sm text-slate-600 hover:text-slate-900">Pricing</a>
<a href="#contact" class="ml-auto rounded-full bg-slate-900 px-4 py-1.5 text-sm font-semibold text-white">Get started</a>
</nav>Dark background variant
<nav class="pill-nav fixed top-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-6 px-6 py-3"
style="--pill-nav-bg: rgba(15,15,20,0.85); --pill-nav-border: rgba(255,255,255,0.08)">
<!-- nav links -->
</nav>