VmVibe Materials
EN中文ESHIAR
Back to map
Digital / Web UI

Liquid Glass

A translucent, refractive glass surface with soft blur, bright edge highlights, and a small amount of depth.

Status: ReadyLg
Lg

Usage

  • Hero cards
  • Floating widgets
  • Navigation panels

Adjustable parameters

  • blur
  • opacity
  • radius
  • rim highlight
  • inner shadow
  • noise

AI Prompt

Create a translucent liquid glass card with soft backdrop blur, subtle refraction, bright rim highlights, inner shadow, and a faint noise layer. Keep text crisp and avoid overusing blur on mobile.

Tailwind notes

Combine backdrop-blur, translucent background, border-white/30, shadow layers, and a pseudo-element for rim light.

Performance notes

Backdrop filters can be expensive on mobile. Use this on a few key surfaces, not on every tile.

CSS

.liquid-glass {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.08)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -20px 50px rgba(255,255,255,.06),
    0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(22px) saturate(1.25);
}

React example

export function LiquidGlassCard({ children }) {
  return <div className="liquid-glass">{children}</div>;
}