Hut 04 · 2,310 m
Rifugio Larice
Twelve bunks, a wood stove and the last sun on the ridge. Open June to September.
Component · liquid-glass-card
Liquid glass
A glass card that really bends what is behind it at the edges, catches a highlight where your pointer is and tilts gently. Drag it over the type to see the lens.
Vanilla JS2.6 KBSVG refractionBlur fallbackReduced transparency
Use it
Copy the folder liquid-glass-card/ (the .js and .css files) into your project. No build step and no framework.
Behaviour
- Real refraction (an SVG displacement map strongest at the edges, like thick glass) in Chromium browsers; everywhere else a frosted blur with the same rim and highlight, so it never looks broken.
- Rim light and highlight are inset lines and a soft light spot, not drop shadows.
- Tilt only with a mouse or trackpad; touch gets the same glass without movement.
prefers-reduced-transparency: an opaque card.prefers-reduced-motion: no tilt.- Draggable card also moves with the arrow keys when focused.
Credits
- Look based on Apple's "Liquid Glass" design language (2025) and Sujon's own ask for premium liquid glass (Oct 27). Also see the fuller kit in skills/liquid-glass-ui.
- Rifugio Larice is a fictional hut. The background is plain type and shapes, no images.
<link rel="stylesheet" href="liquid-glass-card.css">
<article class="lg" data-lg-drag tabindex="0">
...your content...
</article>
<nav class="lg" data-lg-flat>...</nav> <!-- data-lg-flat: no tilt -->
<script type="module" src="liquid-glass-card.js"></script>| Option | Default | What it does |
|---|---|---|
| --lg-tint | 255 255 255 | RGB of the glass body (use your light palette colour). |
| --lg-r | 22px | Corner radius. |
| data-lg-drag | off | Card can be dragged (pointer or arrow keys) inside its parent. |
| data-lg-flat | off | No tilt (for nav bars and pills). |