Glass Navigation

The code

A glimpse of the source:

<div class="glass-nav-scene">
    <div class="glass-nav-bg-orb glass-nav-bg-orb--1">
    </div>
    <div class="glass-nav-bg-orb glass-nav-bg-orb--2">
    </div>
    <div class="glass-nav-bar">
      <span class="glass-nav-logo">BRAND</span>
      <div class="glass-nav-links">
        <button class="glass-nav-link glass-nav-link--active">Accueil</button>
        <button class="glass-nav-link">Produits</button>

Concrete use cases

A few real contexts where Glass Navigation shines:

• A weather or dashboard widget
• A floating notification
• A translucent pricing card

How it works

Pure CSS effect — no JavaScript dependency. It relies on background blur (backdrop-filter).

Make it yours

You can tweak:

• the colors, size and timing straight in the CSS

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Tweak the colors and CSS variables to match your brand — nothing to install.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation. backdrop-filter needs Safari 9+ / Chrome 76+ (add the -webkit- prefix for Safari).

More Glassmorphism effects

FAQ