Glass Card

<div class="nuda-glass-frost">
  <div class="nuda-glass-frost__sheen" aria-hidden="true"></div>
  <p class="nuda-glass-frost__title">Frosted</p>
  <p class="nuda-glass-frost__sub">backdrop-filter glass</p>
</div>

/* Glass Card
   Frosted card with an animated diagonal sheen.
   Customize: --glass-frost-tint, --glass-frost-accent, --glass-frost-blur */

.nuda-glass-frost {
  --glass-frost-tint: rgba(255, 255, 255, 0.06);
  --glass-frost-accent: rgba(228, 255, 84, 0.18);
  --glass-frost-blur: 12px;
  position: relative;
  width: 200px;
  padding: 20px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--glass-frost-tint);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(var(--glass-frost-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-frost-blur)) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.nuda-glass-frost__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, var(--glass-frost-accent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: nuda-glass-frost-sheen 4s ease-in-out infinite;
  will-change: transform;
}

.nuda-glass-frost__title {
  margin: 0;
  color: #fafafa;
  font: 700 1.1rem ui-sans-serif, system-ui;
  letter-spacing: -0.02em;
}

.nuda-glass-frost__sub {
  margin: 0.25rem 0 0;
  color: rgba(250, 250, 250, 0.6);
  font: 500 0.75rem ui-sans-serif, system-ui;
}

@keyframes nuda-glass-frost-sheen {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-glass-frost__sheen {
    animation: none;
    opacity: 0.4;
  }
}