Liquid Glass
Glassmorphism components with gradient borders, luminosity blending, and layered blur effects.
Overview
Liquid glass uses two tiers of glassmorphism: .liquid-glass (light, subtle) and .liquid-glass-strong (heavy, for CTAs and panels). Both use a ::before pseudo-element for gradient borders via mask compositing — no border classes needed.
Best used over dark or image backgrounds for maximum contrast.
Cards
Basic Card
A simple glass card for content display.
Glass Card
A subtle glass surface with gradient border and soft blur.
Strong Card
Heavier blur and stronger border glow for primary content panels.
Strong Glass
Heavy blur with stronger gradient borders for prominent panels.
Blur Levels
Side by Side
Compare different blur intensities on the same background.
0px
No blur
2px
Subtle
4px
Light
8px
Medium
16px
Strong
50px
Heavy
Cards at Different Intensities
Same card layout with varying blur strengths.
Subtle
backdrop-blur-[2px]
Medium
backdrop-blur-[8px]
Heavy
backdrop-blur-[24px]
Feature Card with Icon
A card with an icon container, title, and description.
Processing
AI-powered generation with real-time feedback.
Buttons
CTA Button
Primary call-to-action with strong glass and icon circle.
Ghost Button
Light glass button for secondary actions.
Icon Button
Circular button with icon only.
Pills and Badges
Tag Pills
Small rounded badges for categories or labels.
Status Badge
Pill with a dot indicator for live status.
Online
Processing
Offline
Navigation
Navbar
Top navigation bar with logo, links, and action button.
Social Bar
Horizontal bar with social icons and action button.
Inputs
Text Input
Glass-styled input field.
Search Input
Input with an icon prefix.
Panels
Content Panel
Large glass panel with an inner layout, suitable for hero sections or feature blocks.
Enter our ecosystem
Join the community of creators.
Processing
Real-time AI
Growth Archive
Track progress
Notification Card
Small glass card for toasts or floating notifications.
Generation complete
Your artwork is ready to download.
Compositions
Login Card
Full login form combining glass inputs, button, and layout.
Welcome back
Sign in to your account
No account? Sign up
Pricing Card
Glass pricing block with features list and CTA.
Everything you need to create.
Unlimited generations
Priority processing
4K export
Commercial license
CSS Reference
Two tiers
| Class | Default blur | Use case |
|---|---|---|
.liquid-glass | 2px | Subtle elements: pills, badges, secondary cards, inputs |
.liquid-glass-strong | 16px | Prominent elements: CTAs, panels, overlays, primary cards |
Overriding blur
Add any Tailwind backdrop-blur-* utility to override the default:
<div class="liquid-glass backdrop-blur-none ...">No blur</div>
<div class="liquid-glass backdrop-blur-[4px] ...">Light</div>
<div class="liquid-glass backdrop-blur-[8px] ...">Medium</div>
<div class="liquid-glass backdrop-blur-[24px] ...">Heavy</div>
<div class="liquid-glass backdrop-blur-[50px] ...">Max</div>How it works
Both classes share the same structure:
- Background: near-transparent white with
luminosityblend mode - Backdrop filter: blur for the frosted glass effect — override with
backdrop-blur-* - Box shadow: inner highlight for depth
::beforepseudo-element: gradient border usingmask-composite: exclude— no CSSborderneeded
Design tokens
| Token | Value |
|---|---|
| Border radius (cards) | rounded-3xl or rounded-[2rem] |
| Border radius (pills/buttons) | rounded-full |
| Icon container | w-8 h-8 rounded-full bg-white/10 |
| Text hierarchy | text-white → text-white/80 → text-white/60 → text-white/50 |
| Hover interaction | hover:scale-105 transition-transform |
| Active press | active:scale-95 |
Best Practices
- Always use over dark backgrounds — glass effect is invisible on white
- No border classes — the
::beforepseudo-element handles all borders - Layer glass on glass — nest
.liquid-glasscards inside.liquid-glass-strongpanels for depth - Keep text hierarchy strict — use white at 100/80/60/50% opacity only
- Grayscale palette — no colored accents, let the glass effect do the work
- Interactive feedback — always add
hover:scale-105 active:scale-95 transition-transformto clickable elements