Liquid Glass NavBar
About this project
This project builds a floating navigation bar inspired by Apple's liquid glass design language. The background uses three animated blobs with heavy blur to create a living, colorful mesh that shifts slowly behind the interface. The nav bar itself is a frosted glass panel built entirely with CSS, using backdrop-filter, multi-layer box shadows, and a pseudo-element reflection to simulate the way light bends through a curved glass surface. A sliding pill moves between nav buttons with a springy cubic-bezier curve, and a radial gradient glare follows the mouse across the bar to fake a real-time light source. A single theme toggle swaps the full palette between light and dark mode by flipping a data attribute on the root element.
What you will learn
You will learn how to create a glass morphism effect using backdrop-filter: blur() combined with semi-transparent backgrounds and layered box-shadow values to fake physical depth. You will understand how to use CSS custom properties scoped to [data-theme] so a single attribute swap on the root updates every color across the entire interface at once. You will also learn how to position a sliding pill indicator that measures a button's width and offset with offsetWidth and offsetLeft, then moves with a bouncy spring easing. On top of that you will see how to track mouse position relative to a container using getBoundingClientRect, and feed those coordinates into a CSS custom property to drive a radial-gradient that moves with the cursor.
Understand with AI
Get an AI-generated overview or a file-by-file code breakdown. Ask questions about the project below the overview.
AI Overview: Liquid Glass NavBar
This project creates an interactive navigation bar with a distinct "liquid glass" aesthetic, reminiscent of Apple's UI. Its primary purpose is to provide a visually engaging and functional navigation component for a web application. Key features include a set of clickable navigation buttons with a smooth, sliding "active pill" indicator, a dynamic dark/light mode toggle, and an animated background with colorful "blobs." The navigation bar itself boasts a sophisticated frosted glass effect with a subtle, interactive glare that follows the user's mouse.
The structure of the navigation bar is defined in index.html, using semantic elements and descriptive class names. The main navigation (.liquid-nav) houses the interactive elements, including the active-pill that visually indicates the currently selected item, and individual nav-btn elements for navigation. The background features div.blob elements that create a dynamic, animated mesh.
<nav class="liquid-nav" id="nav">
<div class="liquid-glare-container">
<div class="liquid-glare" id="glare"></div>
</div>
<div class="nav-items">
<div class="active-pill" id="active-pill"></div>
<button class="nav-btn active">...</button>
<button class="nav-btn">...</button>
</div>
<button class="theme-btn" id="theme-btn">...</button>
</nav>This HTML snippet shows the core structure of the navigation bar, including the active pill and theme toggle button.
The "liquid glass" appearance is achieved through advanced CSS styling in style.css. The .liquid-nav element uses backdrop-filter: blur(50px) saturate(200%) to create the frosted effect, combined with multiple box-shadow layers for depth and highlights. A ::before pseudo-element adds a curved, reflective sheen, giving it a "wet" or "liquid" feel. The project also supports a dark mode, managed by CSS variables that are overridden when the data-theme="dark" attribute is applied to the <html> element.
.liquid-nav {
background: var(--glass-bg);
backdrop-filter: blur(50px) saturate(200%);
box-shadow: 0 40px 80px -20px var(--glass-shadow),
0 10px 30px -10px var(--glass-shadow),
inset 0 2px 3px -1px var(--glass-highlight),
inset 0 -2px 4px -1px var(--glass-caustic),
inset 0 0 0 1px var(--glass-border);
}
.liquid-nav::before {
content: '';
background: linear-gradient(180deg, var(--reflection-start) 0%, var(--reflection-end) 100%);
/* ... styling for reflection ... */
}This CSS demonstrates how backdrop-filter, box-shadow, and a pseudo-element with a gradient are used to create the liquid glass effect.
JavaScript in script.js handles the interactivity. When a navigation button is clicked, a function called updatePill dynamically adjusts the width and transform (position) of the active-pill to smoothly slide behind the newly active button. This movement uses a custom cubic-bezier transition for a bouncy, Apple-like animation. The theme toggle button changes the data-theme attribute on the root HTML element, which then triggers CSS variable changes for a seamless dark/light mode switch.
function updatePill(btn, smooth = true) {
if (!btn) return;
activePill.style.transition = smooth
? "transform .5s cubic-bezier(.34,1.2,.64,1), width .5s cubic-bezier(.34,1.2,.64,1)"
: "none";
activePill.style.width = `${btn.offsetWidth}px`;
activePill.style.transform = `translateX(${btn.offsetLeft}px)`;
}This JavaScript function calculates and applies the width and transform styles to move the active pill, with an optional smooth transition.
The interactive glare effect is also powered by JavaScript: a mousemove event listener on the navigation bar updates CSS custom properties (--x and --y) on the .liquid-glare element. This allows a radial-gradient in CSS to follow the mouse cursor, enhancing the realistic glass appearance by simulating a moving light source. The background blobs also animate using CSS @keyframes for continuous, subtle movement.
nav.addEventListener("mousemove", e => {
const rect = nav.getBoundingClientRect();
glare.style.setProperty("--x", `${e.clientX - rect.left}px`);
glare.style.setProperty("--y", `${e.clientY - rect.top}px`);
});This snippet shows how JavaScript tracks the mouse position relative to the navigation bar and updates CSS variables to create the interactive glare.
Ask about this project
Have a question about how this project works? Ask below and get an answer based on the project code.
Code Breakdown
Structured technical breakdown for beginners. Anyone can generate or regenerate; your version is saved in this browser (local storage).
No breakdown yet. Generate one to see a file-by-file explanation. Your version is saved in this browser.
Comments
No comments yet. Sign in to leave a comment.
Sign in to leave a comment.