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

Glass Card

The background shapes are visible through the glass effect.

BG:

Quick Start

<div class="glass-colored rounded-xl p-6" style="--glass-hue: 220">Blue glass</div>

Details

Tailwind
v4.x
Browser
baseline-2024
Features
Dark Mode
A11y
prefers-color-scheme, @supports fallback
Size
763 bytes · 25 lines
Custom Properties
--glass-blur--glass-hue--glass-saturation--glass-border-opacity
Classes
.glass-colored
glassmorphism backdrop-filter blur oklch tinted brand

Glass with a tint — set --glass-hue to any OKLCH hue value (0–360) for brand-colored glassmorphism. The saturation and blur are independently adjustable.

Feature cards with brand colors

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
  <div class="glass-colored rounded-xl p-6" style="--glass-hue: 260">
    <div class="w-10 h-10 rounded-lg bg-white/20 mb-4"></div>
    <h3 class="font-semibold text-white">Analytics</h3>
    <p class="mt-2 text-sm text-white/60">
      Real-time insights into your data.
    </p>
  </div>
  <div class="glass-colored rounded-xl p-6" style="--glass-hue: 180">
    <div class="w-10 h-10 rounded-lg bg-white/20 mb-4"></div>
    <h3 class="font-semibold text-white">Security</h3>
    <p class="mt-2 text-sm text-white/60">
      Enterprise-grade protection.
    </p>
  </div>
  <div class="glass-colored rounded-xl p-6" style="--glass-hue: 30">
    <div class="w-10 h-10 rounded-lg bg-white/20 mb-4"></div>
    <h3 class="font-semibold text-white">Speed</h3>
    <p class="mt-2 text-sm text-white/60">
      Edge-deployed, sub-50ms latency.
    </p>
  </div>
</div>

Customization

.brand-glass {
  --glass-hue: 220;           /* Blue */
  --glass-saturation: 0.2;    /* More vivid */
  --glass-blur: 24px;         /* Heavier blur */
}