Frosted Glass Navbar

<div class="frost-stage"><nav class="frost"><b>Lumen</b><div class="frost-links"><a class="on">Home</a><a>Work</a><a>About</a></div><button class="frost-cta">Get started</button></nav></div>

body{background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Crect width="100" height="100" fill="%23ff7a18"/%3E%3Ccircle cx="30" cy="40" r="40" fill="%23ff477e"/%3E%3Ccircle cx="80" cy="70" r="35" fill="%235b6cff"/%3E%3C/svg%3E');background-size:cover}
.frost-stage{width:100%;display:grid;place-items:center}
.frost{display:flex;align-items:center;gap:20px;padding:14px 22px;border-radius:16px;background:rgba(255,255,255,.15);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.25);font-family:system-ui,sans-serif}
.frost b{color:#fff;font-size:20px}
.frost-links{display:flex;gap:6px}
.frost-links a{color:rgba(255,255,255,.8);font-size:14px;font-weight:600;padding:7px 12px;border-radius:9px;cursor:pointer}
.frost-links a.on,.frost-links a:hover{background:rgba(255,255,255,.2);color:#fff}
.frost-cta{border:0;border-radius:10px;background:#fff;color:#1a1f36;font-weight:700;padding:9px 16px;cursor:pointer}