Liquid Glass vs Glassmorphism
These two names get used interchangeably, and on a screenshot they nearly are. The difference appears when you look at where each one puts its depth: one builds it into the border, the other hangs it outside the card.
Short answer: Glassmorphism floats — a large soft outer shadow, a hover lift, and a light streak that fades at both ends. Liquid Glass sits — a hard uniform top highlight, a heavier border, and no shadow at all.
What actually separates them
Both styles are the same three ingredients: a saturated field behind the page, translucent panels above it, and backdrop-filter to blur what is behind. That is why they read as siblings and why most comparisons end in a shrug.
The divergence is in the edge. In this gallery the Glassmorphism card draws its top light with a ::before element using a horizontal gradient that fades out at both ends, and then lifts the card 4px on hover above a 50px soft shadow. The Liquid Glass card does neither: it paints a single uniform line with box-shadow: inset 0 1px 0 at 55 percent, keeps the card still, and relies on a 28 percent border to separate it from the field.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Liquid Glass | Glassmorphism |
|---|---|---|
| Top edge light | One uniform 1px inset line at 55% white, full width | ● A gradient streak that fades to transparent at both ends |
| Depth cue | Inside the border — the panel reads as thick material | ● Outside the card — a 50px soft shadow, so it floats |
| Border weight | ● 1px at 28% white | 1px at 22% white |
| Card radius | 24px | 20px |
| Blur on cards | blur(24px) saturate(170%) | blur(20px) saturate(150%) |
| Hover | Background lightens, card stays put | ● Card lifts 4px, border brightens to 34% |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Liquid Glass | Glassmorphism |
|---|---|---|
| Top light | box-shadow: inset 0 1px 0 rgba(255,255,255,.55) |
::before { height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent) } |
| Outer depth | none |
box-shadow: 0 20px 50px -30px rgba(0,0,0,.9) |
| Border | 1px solid rgba(255,255,255,.28) |
1px solid rgba(255,255,255,.22) |
| Hover | background: rgba(255,255,255,.14) |
transform: translateY(-4px); border-color: rgba(255,255,255,.34) |
When each one wins
Liquid Glass wins when
- The panel is large and sits over a photographic or video background, where a soft shadow would smear into the image
- You want the card to read as a physical slab — a panel of frosted acrylic rather than a floating sheet
- The page has many stacked panels; hover lifts on every one become a nervous, fidgety surface
Glassmorphism wins when
- The card is small and needs to separate from a busy field — the soft shadow does that work at a glance
- You want a hover affordance on a grid of cards, where the lift reads as clickable
- The background is dark and flat, so a 50px shadow has somewhere to fall and does not look like dirt
Steering a model to one or the other
The words that steer a model between these are specific: ask for a single inset top highlight with no drop shadow and no hover transform, and you get Liquid Glass. Ask for a gradient streak on the top edge plus a large soft shadow and a 4px hover lift, and you get Glassmorphism. Naming the material rather than the style — slab versus pane — gets you there faster than naming the style at all, because both names are ambiguous enough that a model will pick either.