Fetch snippet JSON: curl https://webspire.de/snippets/glass/frosted.json

Glass Card

The background shapes are visible through the glass effect.

BG:

Quick Start

<div class="glass-frosted rounded-xl p-8">Your content</div>

Details

Tailwind
v4.x
Browser
baseline-2024
Features
Dark Mode
A11y
prefers-color-scheme, @supports fallback
Size
655 bytes · 25 lines
Custom Properties
--glass-blur--glass-opacity--glass-border-opacity
Classes
.glass-frosted
glassmorphism backdrop-filter blur translucent card

The classic milky glass look. Works on any background — gradients, images, or solid colors. Adjust --glass-blur for stronger or softer blur, --glass-opacity for transparency.

Login card with Tailwind

<div class="relative min-h-screen bg-gradient-to-br from-violet-500
            to-fuchsia-600 flex items-center justify-center p-4">
  <div class="glass-frosted rounded-2xl p-8 w-full max-w-sm">
    <h2 class="text-xl font-bold text-white mb-6">Sign in</h2>
    <input class="w-full rounded-lg bg-white/10 border border-white/20
                  px-4 py-2.5 text-white placeholder-white/40 mb-4
                  focus:outline-none focus:ring-2 focus:ring-white/30"
           placeholder="Email" />
    <button class="w-full rounded-lg bg-white text-violet-700
                   font-semibold py-2.5 hover:bg-white/90
                   transition-colors">Continue</button>
  </div>
</div>

Customization

.my-card {
  --glass-blur: 20px;      /* More blur */
  --glass-opacity: 0.25;   /* Less transparent */
}