20 CSS Hamburger Menus 12 / 20

Full Screen Blur Overlay Hamburger Menu

Glassmorphism showcase: animated colored orbs behind, and on open a full-screen backdrop-filter: blur() overlay with layered z-indexing and fading large links.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="chm-12">
  <div class="chm-12__scene">
    <div class="chm-12__scape"><div class="chm-12__orb chm-12__o1"></div><div class="chm-12__orb chm-12__o2"></div><div class="chm-12__orb chm-12__o3"></div></div>
    <div class="chm-12__scapegrid"></div>

    <div class="chm-12__trg" aria-label="Toggle blur menu"><div class="chm-12__b"><i></i><i></i><i></i></div></div>

    <div class="chm-12__overlay">
      <div class="chm-12__lbl">// glassmorphism nav</div>
      <a href="#">Studio</a>
      <a href="#">Projects</a>
      <a href="#">Process</a>
      <a href="#">Contact</a>
    </div>

    <div class="chm-12__stage">
      <div class="chm-12__hero">
        <h1>FROSTED<br>FOCUS</h1>
        <p>Backdrop-filter blur on open</p>
      </div>
    </div>
    <div class="chm-12__tag">BLUR_OVERLAY // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;600;800&family=Azeret+Mono:wght@400;500&display=swap');
.chm-12, .chm-12 *, .chm-12 *::before, .chm-12 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-12{
  --bg:#0a0612;--glow1:#ff4d9d;--glow2:#5b8cff;--glow3:#43f5c4;--white:#f4eefb;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Unbounded',sans-serif;background:var(--bg);color:var(--white);
  position:relative;
}
.chm-12__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-12__scape{position:absolute;inset:0;z-index:0}
.chm-12__orb{position:absolute;border-radius:50%;filter:blur(10px);opacity:.9;animation:chm-12-float 14s ease-in-out infinite alternate}
.chm-12__o1{width:46%;height:46%;background:radial-gradient(circle,var(--glow1),transparent 70%);top:-8%;left:-6%}
.chm-12__o2{width:40%;height:40%;background:radial-gradient(circle,var(--glow2),transparent 70%);bottom:-10%;right:-4%;animation-delay:-4s}
.chm-12__o3{width:34%;height:34%;background:radial-gradient(circle,var(--glow3),transparent 70%);top:38%;left:42%;animation-delay:-8s}
@keyframes chm-12-float{to{transform:translate(6%,-6%) scale(1.15)}}
.chm-12__scapegrid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(244,238,251,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,238,251,.06) 1px,transparent 1px);background-size:64px 64px}
.chm-12__stage{position:relative;z-index:3;min-height:460px;display:grid;place-items:center;text-align:center;padding:24px}
.chm-12__hero h1{font-size:clamp(1.8rem,6vw,4rem);font-weight:800;letter-spacing:-.02em;line-height:.95;text-shadow:0 8px 50px rgba(0,0,0,.4)}
.chm-12__hero p{font-family:'Azeret Mono',monospace;margin-top:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,238,251,.7)}
.chm-12__trg{position:absolute;top:22px;right:22px;z-index:60;width:56px;height:56px;border-radius:18px;cursor:pointer;display:grid;place-items:center;
  background:rgba(244,238,251,.08);border:1px solid rgba(244,238,251,.22);backdrop-filter:blur(14px);transition:transform .5s,border-color .4s}
.chm-12__trg:hover{transform:scale(1.07);border-color:var(--white)}
.chm-12__b{width:24px;height:14px;position:relative}
.chm-12__b i{position:absolute;left:0;height:2.4px;width:100%;background:var(--white);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-12__b i:nth-child(1){top:0}.chm-12__b i:nth-child(2){top:6px}.chm-12__b i:nth-child(3){top:12px}
.chm-12.is-open .chm-12__b i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.chm-12.is-open .chm-12__b i:nth-child(2){opacity:0}
.chm-12.is-open .chm-12__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.chm-12__overlay{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  background:rgba(10,6,18,.28);backdrop-filter:blur(0px) saturate(100%);
  opacity:0;pointer-events:none;transition:backdrop-filter .7s,opacity .5s,background .7s}
.chm-12.is-open .chm-12__overlay{opacity:1;pointer-events:auto;backdrop-filter:blur(30px) saturate(160%);background:rgba(10,6,18,.42)}
.chm-12__lbl{font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--glow3);margin-bottom:24px;opacity:0;transition:.4s .4s}
.chm-12.is-open .chm-12__lbl{opacity:1}
.chm-12__overlay a{font-size:clamp(1.6rem,5vw,3.4rem);font-weight:300;color:var(--white);text-decoration:none;line-height:1.1;letter-spacing:-.01em;transition:color .3s,letter-spacing .3s;opacity:0;transform:translateY(30px)}
.chm-12.is-open .chm-12__overlay a{opacity:1;transform:none}
.chm-12.is-open .chm-12__overlay a:nth-child(2){transition:.6s .42s}
.chm-12.is-open .chm-12__overlay a:nth-child(3){transition:.6s .50s}
.chm-12.is-open .chm-12__overlay a:nth-child(4){transition:.6s .58s}
.chm-12.is-open .chm-12__overlay a:nth-child(5){transition:.6s .66s}
.chm-12__overlay a:hover{color:var(--glow1);letter-spacing:.02em}
.chm-12__tag{position:absolute;bottom:20px;left:24px;z-index:5;font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(244,238,251,.45)}

@media (prefers-reduced-motion: reduce){
  .chm-12__orb{animation:none !important}
  .chm-12__trg,.chm-12__b i,.chm-12__overlay,.chm-12__overlay a,.chm-12__lbl{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-12');
  if (!root) return;
  const btn = root.querySelector('.chm-12__trg');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();

More from 20 CSS Hamburger Menus

Full-Screen Overlay Mobile NavigationSlide-out Sidebar / Off-Canvas NavigationResponsive Navbar with Mobile-Only Hamburger ToggleMinimalist / Floating Hamburger ButtonTailwind CSS Hamburger MenuAccessible Hamburger Menu (WCAG Compliant)Mobile Bottom Nav Bar with Floating HamburgerMulti-Level Dropdown Hamburger Menu (Nested Accordion)Flexbox Navbar with Right-Aligned Hamburger IconCircular Expand / Radial Ripple Mobile MenuFixed Sticky Header with Shrinking Hamburger IconNeumorphic Hamburger Menu Toggle Button
View the full collection →

Search CodeFronts

Loading…

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