Maximum glassmorphism — heavy blur, saturated backdrop, and an inset highlight for a premium frosted look. Use for hero cards, modal dialogs, or any element that should feel elevated.

Pricing card with Tailwind

<div class="glass-bold rounded-2xl p-8 max-w-sm text-white">
  <span class="text-sm font-medium uppercase tracking-wider
               text-white/60">Pro</span>
  <div class="mt-4 flex items-baseline gap-1">
    <span class="text-4xl font-black">$29</span>
    <span class="text-white/50">/mo</span>
  </div>
  <ul class="mt-6 space-y-3 text-sm text-white/80">
    <li class="flex items-center gap-2">✓ Unlimited projects</li>
    <li class="flex items-center gap-2">✓ Priority support</li>
    <li class="flex items-center gap-2">✓ Custom domains</li>
  </ul>
  <button class="mt-8 w-full rounded-xl bg-white py-3
                 text-sm font-semibold text-black
                 hover:bg-white/90 transition-colors">
    Get started
  </button>
</div>

Customization

.hero-card {
  --glass-blur: 30px;          /* Even more blur */
  --glass-opacity: 0.3;        /* More opaque */
  --glass-border-opacity: 0.4; /* Stronger border */
}