VmVibe Materials
EN中文ESHIAR
返回地图
Digital / Web UI

液态玻璃

一种半透明、带折射感的玻璃表面，用柔和模糊、边缘高光和轻微深度制造高级感。

当前状态: ReadyLg
Lg

适用场景

  • Hero 卡片
  • 悬浮小组件
  • 导航面板

可调参数

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

AI Prompt

生成一张半透明液态玻璃卡片：背景柔和模糊，边缘有高光，内部有轻微阴影和细噪点。文字必须清晰，移动端不要过度使用 blur。

Tailwind 思路

组合 backdrop-blur、半透明背景、浅色描边、多层阴影，并用伪元素做边缘高光。

性能提醒

backdrop-filter 在移动端可能较重，适合关键表面，不要铺满所有卡片。

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 示例

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