Geri Dön

Parlayan Glassmorphism Navbar

Butonlar ve Kartlar / 3 Görüntülenme

Favoriye Ekle

Canlı Önizleme

Nasıl Kullanılır?

Navbar'ı sayfanın üstüne sabitlemek için 'position: fixed' ve 'top: 20px' ekleyebilirsiniz.

Kaynak Kodlar

HTML

<nav class="glass-nav">
  <div class="nav-logo">BRAND</div>
  <ul class="nav-links">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Projects</a></li>
  </ul>
</nav>

CSS

.glass-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 40px; background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px; width: 80%; margin: 0 auto;
}
.nav-links { display: flex; list-style: none; gap: 30px; margin: 0; }
.nav-links a { text-decoration: none; color: white; font-weight: 500; transition: 0.3s; }
.nav-links li.active a { color: #00cec9; text-shadow: 0 0 10px #00cec9; }