Glass Floating Sidebar

<div class="nuda-glassbar-wrap">
  <div class="nuda-glassbar-wrap__bg" aria-hidden="true"></div>
  <aside class="nuda-glassbar">
    <button class="nuda-glassbar__btn is-active">✦</button>
    <button class="nuda-glassbar__btn">◇</button>
    <button class="nuda-glassbar__btn">◯</button>
    <button class="nuda-glassbar__btn">▣</button>
  </aside>
</div>

.nuda-glassbar-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  background: #0c0c10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-glassbar-wrap__bg {
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 90deg,#62b6ff,#9d6dff,#ff6dd4,#e4ff54,#62b6ff);
  filter: blur(40px);
  opacity: .4;
  animation: _glassSpin 18s linear infinite;
}

.nuda-glassbar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: rgba(20,20,24,.55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
}

.nuda-glassbar__btn {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  color: #fafafa;
  font-size: 14px;
  cursor: pointer;
  transition: transform .25s,background .2s,border-color .25s;
}

.nuda-glassbar__btn:hover {
  transform: scale(1.08);
  background: rgba(255,255,255,.1);
}

.nuda-glassbar__btn.is-active {
  background: rgba(228,255,84,.18);
  border-color: #e4ff54;
  color: #e4ff54;
}

@keyframes _glassSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-glassbar-wrap__bg {
    animation: none;
  }
}