Liquid Glass 卡片实验室

iOS 26 毛玻璃效果编辑器

模糊 Blur18px

饱和度 Saturate180%

边缘高光 Border α0.35

玻璃厚度 Thickness0.5

暗色背景模式

Liquid Glass

BitLeap

backdrop-filter · color-mix · @property ready

CSS 输出

.liquid-glass {
  background: color-mix(in oklab, white 22%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -10px 30px rgba(255,255,255,0.075),
    0 30px 60px rgba(0,0,0,0.25);
}

@media (prefers-reduced-transparency: reduce) {
  .liquid-glass {
    backdrop-filter: none;
    background: #e2e8f0;
  }
}

· 使用 backdrop-filter + color-mix(in oklab)

· 含 prefers-reduced-transparency 降级

· 所有参数在客户端计算，无 SSR 冲突