Pure CSS · Glassmorphism · Liquid Glass

Liquid Glass
UI Kit

Complete design token system, 15+ accessible components, light/dark mode, 12 animations — zero dependencies.

Explore Components → View Animations
15+
Components
12
Animations
a11y
WCAG Compliant

Glass Cards

Hover to interact
Component · 01

Frosted Surface

Backdrop-filter blur creates depth without obscuring the vibrant background.

Live
Component · 02

Dark Glass

Darker tint for contrast-rich surfaces. Ideal over bright backgrounds.

Premium
🌊
Lyra Voss
UI Designer · Berlin
Projects87%
Clarity94%

Buttons

Glass · Ghost · Accent · Danger · Sizes

Navigation & Tabs

Pill nav · Tab panels · Toggle

Overview

Tab panels switch content without page navigation. Each panel is accessible via keyboard and ARIA roles, with an animated reveal on activation.

Technical Specs

Built on CSS custom properties with no JavaScript dependencies for pure display. The JS layer handles ARIA state updates and keyboard navigation (Arrow keys, Home, End).

Example Panels

Any content can live inside a tab panel — forms, data tables, cards, or rich media. The glass surface adapts to whatever's inside.

Grid List Map

Dropdown

Custom menu · Keyboard accessible

Form Controls

Checkbox · Radio · Switch · Select · Input
✉

Accordion

Click to expand
Liquid Glass is a CSS design language built around backdrop-filter blur, translucent surfaces, and reflective gradients — creating the illusion of physical depth on digital screens.
backdrop-filter is supported in all modern browsers. A @supports fallback is included for older Firefox, providing a semi-transparent solid surface instead of blur.
All values are CSS custom properties. Toggle data-theme="light" on the <html> element to switch the entire palette instantly. Override individual tokens in a local scope for component-level theming.
Yes. All interactive elements have ARIA roles, keyboard support, and visible :focus-visible outlines. prefers-reduced-motion disables all animations. Colour contrast meets WCAG AA on both themes.

Stepper

Multi-step flow · Horizontal & vertical

Horizontal stepper

✓
Account
✓
Profile
3
Billing
4
Review

Vertical stepper

✓
Create account
2
Verify email
3
Set up workspace

Data Table

Sortable · Hover rows · Status badges
Team Members 5 members
🔍
0 selected
Member ↑ Role Status Projects ↕ Score ↕
👩
Lyra Voss
UI Designer Online 12
97
👨‍💻
Marc Dubois
Frontend Eng Online 8
89
👩‍🎨
Sara Kim
Motion Away 5
84
👨‍🔬
Omar Reyes
Backend Eng Offline 9
91
👩‍💼
Ines Hartmann
Product Online 14
99
Showing 1–5 of 5

Toast / Snackbar

Animated entry · Auto-dismiss · Click to close

Badges & Tags

All colour variants
Active Premium New Beta Online Error
glassmorphism liquid glass backdrop-filter blur effects CSS animations zero deps WCAG 2.1 AA

Notifications

Hover to slide
⚡
Build complete
UI Kit compiled successfully — 0 errors.
8m ago
✦
New component added
glass-modal is ready. Check the docs.
1h ago

Modal

Focus trap · ARIA · Liquid entry

Skeleton Loader

Shimmer state for async content

Chips

Dismissible · Selectable · Dynamic

Colour variants

🌊 Aqua ✕ ⚡ Violet ✕ 🌸 Rose ✕ ✦ Amber ✕

Selectable filter chips

Design Frontend Motion 3D Glassmorphism

Dynamic — dismiss or add new

🎨Illustrator✕ 🖥Figma✕ ✏️Sketch✕

Avatar Group

Photos · Initials · Status · Overflow · Sizes

Photo avatars — hover for name card

👩
👨‍💻
👩‍🎨
+7
10 members · 3 online

Size variants

👩
👨‍💻
+9
sm · 32px
👩
👨‍💻
+9
default · 44px
👩
👨‍💻
+9
lg · 56px

12 Liquid Animations

Pure CSS · Infinite loop · Respects reduced-motion
1 · Liquid Morph
2 · Shimmer
3 · Float
4 · Refraction
5 · Ripple
6 · Edge Glow
7 · Breathing Blur
8 · Depth Shift
9 · Cascade Reveal
10 · Prism Hue Shift
11 · Liquid Drain
12 · Surface Tension