Liquid Glass
液态玻璃
Aliases:液态玻璃苹果新玻璃厚玻璃折射玻璃透镜效果Liquid Glassrefractive glass UI
What is it
Thick refractive glass layers, specular highlights and liquid morphing as a functional overlay look. The glass is a thick lens — it bends content beneath and reflects the room, with edge lensing distortion. Volume and fluidity of the material are the point.
Design spec
Typography
System sans, slightly lighter weight on glass
Color
Hue inherited from the content beneath, speculars near-white
Border
1px translucent white rims suggesting refraction edges
Shadow
Top inset specular plus a wide soft outer shadow
Spacing
20px+ radii or pills, controls on a separate floating layer
Motion
250–400ms ease-out refraction shifts and specular slide; honour prefers-reduced-motion
States
Hover slides the specular along the rim and scales slightly; focus shows a visible white ring; active lowers refraction; disabled loses opacity and speculars; error tints refraction red, fading colour only
Style in action
See the full page, then try the interactive sceneFull-page preview
Let the interface
become thick glass
Refract content, reflect the surroundings and let edges flow.
Explore refraction →Deep refraction
Lens-like depth
Specular highlights
A bright rim of light
Flowing edges
Lensing distortion
REFRACT. REFLECT. MORPH.
Interactive scene
Loading demo…
✓ When to use
- Navigation, toolbars and overlays that must share the system material language
- Over colorful photos or rich content worth refracting
- When you want the volume of a thick glass slab, not a thin veil
✕ When not to use
- Long-form reading where refraction and highlights keep interrupting
- Performance-sensitive or older devices — live refraction is expensive
- Light frosted layering only — glassmorphism is cheaper and clearer
Variants
Sheet lens
片状透镜
Large thick slabs with obvious edge lensing
Button capsule
胶囊按钮
Small capsule controls with concentrated speculars
Full panel
全幅面板
Sidebar- or toolbar-scale glass that absorbs ambient color
Implementation
backdrop-filter: blur() saturate()box-shadow: inset 高光 + 外投影border: 1px solid rgba(255,255,255,0.5)background: rgba(255,255,255,0.12)border-radius: 999pxThickness comes from three layers: low-opacity fill + backdrop-filter blur(20px) saturate(180%) + an inset top specular and a darker inset bottom edge. Edge lensing is approximated with a thicker translucent white rim plus a faint tint of the magnified backdrop. True refraction needs SVG filters or canvas; on the web, speculars and saturation sell it. Glass must float over colorful content. Dark mode darkens the fill and keeps the speculars.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement Liquid Glass visual style in the current project. Inspect existing overlay and navigation components first; confirm colorful content beneath to refract. Requirements: - Thick glass: low-opacity fill + backdrop blur/saturate + top specular + bottom edge - Translucent white rims to suggest lensing — not a thin blur veil - Controls float on their own functional layer; glass never fully hides the content - @supports fallback to a more opaque fill; speculars kept in dark mode - Text contrast verified against the refracted result - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesSimilarA visual language that borrows real-world materials and physical forms for digital controls: leather stitching, wood grain, brushed metal, glass gloss. Buttons look pressable, switches look like levers — highlights, shadows and bevels make "what it looks like" teach "how it works".
StylesSimilarAn atmosphere built from large flowing gradient blooms: teal, violet and blue blurred blobs drift and merge across the background while the foreground stays minimal. Color is the protagonist — soft, cross-hue, aurora-like transitions that give the interface breath and warmth.
StylesUsed withA horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsAffectsA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsAffectsA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsNot to be confused with
Glassmorphism is thin frosted blur (a veil of blur); liquid-glass is a thick refractive lens with edge distortion and speculars.