Glassmorphic Style Navbar Template

This navbar uses a "glassmorphic" effect, which gives it a modern and elegant look. It's also mobile-responsive and accessible. Copy and paste the code straight into your own web projects.

Screenshot of the glassmorphic navbar template

Get Source Code Preview

Features

This design uses the popular "frosted glass" effect, which is achieved by applying a background blur to a semi-transparent element. It's a modern, elegant look that works best when placed over a vibrant or visually interesting background. Requires the CSS backdrop-filter property. Looks stunning on top of vibrant images or gradients.

Features of this template include:

Core Effect: Utilizes the CSS backdrop-filter: blur() property to create the signature frosted glass look.
Showcase Background: The body is given a colorful gradient background to effectively demonstrate the blur effect of the navbar.
Aesthetic Details: A subtle white border and semi-transparent background color complete the glass-like appearance, helping to lift the navbar off the background.
Browser Compatibility: While backdrop-filter is widely supported in modern browsers, this code provides a simple semi-transparent background as a graceful fallback for those that don't support it. A comment is included to this effect.
Accessibility:
- Text Readability: High-contrast white text combined with a subtle text-shadow is used to ensure links are legible against any colorful or complex background that might appear behind the blur.
- Focus States: Clear and distinct focus styles (:focus-visible) are implemented for keyboard navigation, which is crucial for see-through components.
- Semantic & ARIA: As per standard, it uses semantic HTML and the correct ARIA attributes for the mobile menu toggle to ensure full accessibility.

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphic Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Glassmorphic Theme)
        ========================================
        The theme is defined by its semi-transparent colors,
        a blur value, and high-contrast text.
        */
        :root {
            /* RGBA is used for transparency. The alpha value (e.g., 0.2) is key. */
            --color-glass-bg: rgba(255, 255, 255, 0.2);
            --color-glass-border: rgba(255, 255, 255, 0.3);
            --color-link-highlight: rgba(255, 255, 255, 0.25);
            
            --color-text: #ffffff; /* Fully opaque white for max contrast */
            --color-focus-outline: #5ab1ff;
            
            --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-weight-bold: 600;
            
            --blur-value: 10px;
            --border-radius-soft: 8px;
            --navbar-height: 70px;
            --navbar-padding: 1.5rem;
            --container-width: 1140px;
            --transition-speed: 0.3s;
        }

/*
        ========================================
        Global Resets & Showcase Background
        ========================================
        */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

body {
            margin: 0;
            font-family: var(--font-family-sans-serif);
            font-size: 1rem;
            line-height: 1.5;
            color: var(--color-text);
            
            /* A vibrant background is essential to see the glassmorphism effect. */
            background-image: linear-gradient(45deg, #ff005c, #5200ff);
            background-attachment: fixed; /* Ensures the gradient doesn't scroll with content */
        }
        
        /* Placeholder content to demonstrate scrolling */
        .content {
            padding: calc(var(--navbar-height) + 2rem) var(--navbar-padding);
            height: 200vh;
            color: white; /* Make text readable on gradient */
            text-align: center;
        }
        
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: inherit; }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            /* Positioned fixed to stay at the top and show the effect while scrolling */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--navbar-height);
            display: flex;
            align-items: center;
            z-index: 1000;
            
            /* The Core Glassmorphism Properties */
            background: var(--color-glass-bg);
            border-bottom: 1px solid var(--color-glass-border);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            
            /*
             The `backdrop-filter` property creates the "frosted glass" blur effect.
             Older browsers that do not support this will simply see a semi-transparent navbar.
            */
            backdrop-filter: blur(var(--blur-value));
            -webkit-backdrop-filter: blur(var(--blur-value)); /* For Safari compatibility */
        }

.navbar__container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 0 var(--navbar-padding);
        }
        
        .navbar__brand {
            font-size: 1.5rem;
            font-weight: var(--font-weight-bold);
        }
        
        /* Make text readable against any background with a subtle shadow */
        .navbar__brand,
        .navbar__link {
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

/*
        ========================================
        Mobile Menu & Hamburger Toggle
        ========================================
        */
        .navbar__toggle {
            display: block;
            padding: 0.5rem;
            border: none;
            background: transparent;
            cursor: pointer;
            z-index: 1001;
        }
        
        .navbar__toggle .bar {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            background-color: var(--color-text);
            transition: all var(--transition-speed) ease-in-out;
            border-radius: 2px;
        }

.navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        
        .navbar__menu {
            display: none;
            flex-direction: column;
            width: 100%;
            position: absolute;
            top: var(--navbar-height);
            left: 0;
            z-index: -1; /* Place behind the main navbar */

background: var(--color-glass-bg);
            backdrop-filter: blur(var(--blur-value));
            -webkit-backdrop-filter: blur(var(--blur-value));
            border-top: 1px solid var(--color-glass-border);
            padding-bottom: 1rem;
        }
        
        .navbar__menu.is-active { 
            display: flex; 
            background-image: linear-gradient(45deg, #ff005c, #5200ff);
        }

.navbar__item { text-align: center; }

.navbar__link {
            display: block;
            padding: 1.25rem;
            font-weight: var(--font-weight-bold);
            transition: background-color var(--transition-speed) ease;
        }
        
        /* Add a subtle highlight for interaction on mobile */
        .navbar__link:hover, .navbar__link:focus {
            background-color: var(--color-link-highlight);
        }

/* Highly visible focus outline for accessibility */
        :is(.navbar__toggle, .navbar__link):focus-visible {
            outline: 2px solid var(--color-focus-outline);
            outline-offset: 2px;
            border-radius: var(--border-radius-soft);
        }

/*
        ========================================
        Desktop Navbar Styles (Responsive)
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle { display: none; }

.navbar__menu {
                display: flex;
                flex-direction: row;
                align-items: center;
                position: static;
                width: auto;
                background-color: transparent !important;
                background-image: none !important;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border: none;
                z-index: 1;
                padding: 0;
            }
            
            .navbar__list {
                display: flex;
                align-items: center;
            }

.navbar__item { margin-left: 0.5rem; }

.navbar__link {
                padding: 0.6rem 1.1rem;
                border-radius: var(--border-radius-soft);
            }
            
            .navbar__link:hover,
            .navbar__link:focus,
            .navbar__link--active {
                background-color: var(--color-link-highlight);
            }
        }
    </style>
</head>
<body>

<header class="navbar" role="banner">
        <div class="navbar__container">
            <a href="#" class="navbar__brand" aria-label="Homepage">Aura</a>
            
            <button class="navbar__toggle" 
                    id="navbarToggle" 
                    aria-label="Toggle navigation" 
                    aria-controls="navbarMenu" 
                    aria-expanded="false">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
            
            <nav id="navbarMenu" class="navbar__menu" role="navigation" aria-labelledby="navbarToggle">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link navbar__link--active">Home</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Features</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Gallery</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Sign In</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main class="content">
        <h1>Glassmorphism in Action</h1>
        <p>Scroll down to see the "frosted glass" effect of the fixed navbar over the page content.</p>
    </main>

if (navbarToggle && navbarMenu) {
                navbarToggle.addEventListener('click', function () {
                    navbarToggle.classList.toggle('is-active');
                    navbarMenu.classList.toggle('is-active');

// Update the aria-expanded attribute for screen readers
                    const isExpanded = navbarToggle.getAttribute('aria-expanded') === 'true';
                    navbarToggle.setAttribute('aria-expanded', !isExpanded);
                });
            }
        });
    </script>
</body>
</html>

View Output