11 CSS Header Designs 05 / 11

Glassmorphism Transparent Header

A floating frosted bar using background:rgba() with backdrop-filter:blur(20px) saturate(160%) and inner highlight strokes, blurring against a vibrant animated hero gradient with noise.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="csh-05">
  <div class="csh-05__hero-bg"></div>

  <header class="csh-05__header">
    <div class="csh-05__bar">
      <a href="#" class="csh-05__logo"><span class="csh-05__dot"></span>Prisma</a>
      <nav class="csh-05__nav">
        <a href="#">Features</a>
        <a href="#">Showcase</a>
        <a href="#">Customers</a>
        <a href="#">Pricing</a>
        <a href="#" class="csh-05__cta">Try free</a>
      </nav>
    </div>
  </header>

  <section class="csh-05__hero">
    <div>
      <div class="csh-05__eyebrow">backdrop-filter: blur(20px)</div>
      <h1>Frosted glass,<br><em>floating free.</em></h1>
      <p>A header that melts into the hero behind it</p>
    </div>
  </section>
</div>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Spline+Sans+Mono:wght@400;500&display=swap');

.csh-05, .csh-05 *, .csh-05 *::before, .csh-05 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-05 ::selection{background:#fff;color:#5f27cd}
.csh-05 ::-moz-selection{background:#fff;color:#5f27cd}

.csh-05{
  --white:#ffffff;
  --glass:rgba(255,255,255,0.12);
  --stroke:rgba(255,255,255,0.28);
  font-family:'Outfit',sans-serif;
  min-height:100vh;position:relative;overflow:hidden;color:var(--white);
  background:#0a0a18;
}
/* Vibrant animated hero "image" the glass blurs against */
.csh-05__hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(45% 55% at 18% 25%,#ff6b9d,transparent 65%),
    radial-gradient(50% 50% at 82% 30%,#feca57,transparent 60%),
    radial-gradient(55% 60% at 50% 95%,#48dbfb,transparent 60%),
    radial-gradient(40% 45% at 70% 75%,#a55eea,transparent 60%),
    linear-gradient(135deg,#5f27cd,#ee5253);
  animation:csh-05-shift 22s ease-in-out infinite alternate}
@keyframes csh-05-shift{50%{filter:hue-rotate(28deg)}to{transform:scale(1.12) translate(-2%,2%)}}
.csh-05__hero-bg::after{content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.07;mix-blend-mode:overlay}

.csh-05__header{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100% - 36px))}
/* GLASSMORPHISM: translucent fill + backdrop blur + inner highlight */
.csh-05__bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 12px 22px;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--stroke);
  border-radius:22px;
  box-shadow:0 8px 40px -8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.08);
}
.csh-05__logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none;color:var(--white)}
.csh-05__dot{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.4));box-shadow:0 0 18px rgba(255,255,255,.6)}
.csh-05__nav{display:flex;gap:4px;align-items:center}
.csh-05__nav a{position:relative;text-decoration:none;color:rgba(255,255,255,.82);font-size:.92rem;font-weight:400;padding:9px 16px;border-radius:12px;transition:color .3s,background .3s}
.csh-05__nav a:hover{color:#fff;background:rgba(255,255,255,.14)}
.csh-05__nav a.csh-05__cta{font-family:'Spline Sans Mono',monospace;font-size:.78rem;font-weight:500;letter-spacing:.02em;background:rgba(255,255,255,.92);color:#5f27cd;padding:11px 22px;border-radius:14px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,color .3s,background .3s}
.csh-05__nav a.csh-05__cta:hover{transform:translateY(-2px);color:#5f27cd;background:#fff;box-shadow:0 10px 28px -8px rgba(255,255,255,.6)}

.csh-05__hero{position:relative;z-index:10;min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-05__eyebrow{font-family:'Spline Sans Mono',monospace;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:24px;padding:8px 18px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--stroke);border-radius:30px;display:inline-block}
.csh-05__hero h1{font-size:clamp(2.8rem,11vw,7.5rem);font-weight:800;line-height:.9;letter-spacing:-.045em;text-shadow:0 4px 40px rgba(0,0,0,.25)}
.csh-05__hero h1 em{font-style:normal;font-weight:300}
.csh-05__hero p{font-family:'Spline Sans Mono',monospace;margin-top:24px;font-size:.82rem;letter-spacing:.18em;color:rgba(255,255,255,.78)}

@media (max-width:720px){.csh-05__nav a:not(.csh-05__cta){display:none}}
@media (prefers-reduced-motion: reduce){.csh-05__hero-bg{animation:none !important}.csh-05__nav a,.csh-05__cta{transition:none !important}}

More from 11 CSS Header Designs

Shrinking Header on ScrollFlexbox 3-Column Navbar HeaderPure CSS Fixed Navigation (Sticky Header)CSS Grid Mega Menu HeaderFull-Screen Overlay Hamburger HeaderHeader with Announcement BarTwo-Tier Double-Decker HeaderAnimated Link Hover Effects HeaderVertical Sidebar Navigation HeaderMulti-Level Dropdown Menu Header
View the full collection →

Search CodeFronts

Loading…

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