Tailwind UI Pattern Registry for humans and agents

glass liquid adaptive backdrop-filter brightness saturation apple contextual navigation bar that reads its background card floating over a colorful hero image modal that preserves context behind it Apple-style Liquid Glass UI component frosted glass feels disconnected from background want glass to pick up ambient color, not just blur UI layer needs to feel embedded in the scene

Adaptive Glass

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

Glass Card

Translucency matters only when the background still reads clearly through the panel.

Stage Background
Customize

Quick Start

<nav class="glass-adaptive px-6 py-4">Navigation</nav>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-color-scheme, @supports fallback
Size
860 bytes · 38 lines
Custom Properties
--glass-blur--glass-tint--glass-brightness--glass-saturation--glass-rim--glass-radius
Classes
.glass-adaptive
glass liquid adaptive backdrop-filter brightness saturation apple contextual

Combines backdrop-filter: blur() brightness() saturate() to create glass that actively reads its background. The brightness() function lightens dark backgrounds showing through; saturate() picks up the ambient hue. Result: the glass adapts to what’s behind it rather than just blurring it.

Dark mode increases brightness and saturation further — a dark background benefits from more luminance lift to retain legibility.

Floating card over gradient hero

<div style="background: linear-gradient(135deg, oklch(55% 0.25 280), oklch(65% 0.2 340)); padding: 4rem; min-height: 20rem; position: relative;">
  <div class="glass-adaptive p-8 max-w-sm">
    <h2 class="text-xl font-bold text-white mb-2">Live preview</h2>
    <p class="text-sm text-white/80">The glass picks up the gradient behind it.</p>
  </div>
</div>
<header class="glass-adaptive sticky top-0 flex items-center justify-between px-6 py-4" style="--glass-radius: 0;">
  <span class="font-bold text-slate-800 dark:text-white">Brand</span>
  <nav class="flex gap-4 text-sm text-slate-600 dark:text-slate-300">
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Docs</a>
  </nav>
</header>