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

Glass Card

The background shapes are visible through the glass effect.

BG:

Quick Start

<div class="glass-dark rounded-xl p-8">Dark overlay content</div>

Details

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

Smoky, moody glass — darkens the backdrop with reduced brightness for a cinematic feel. Sets text to white automatically. Perfect for overlays, dark modals, or dramatic card styles over light/colorful backgrounds.

<div class="fixed inset-0 flex items-center justify-center p-4 z-50">
  <div class="glass-dark rounded-2xl p-8 w-full max-w-md
              shadow-2xl">
    <h2 class="text-xl font-bold">Confirm action</h2>
    <p class="mt-3 text-sm text-white/60">
      This action cannot be undone. Are you sure?
    </p>
    <div class="mt-6 flex gap-3 justify-end">
      <button class="rounded-lg px-4 py-2 text-sm text-white/70
                     hover:text-white transition-colors">
        Cancel
      </button>
      <button class="rounded-lg bg-red-500 px-4 py-2 text-sm
                     font-semibold text-white hover:bg-red-600
                     transition-colors">
        Delete
      </button>
    </div>
  </div>
</div>

Customization

.cinema-overlay {
  --glass-blur: 24px;         /* Heavier blur */
  --glass-opacity: 0.75;      /* More opaque */
  --glass-border-opacity: 0;  /* No border */
}