CSS 工具 / 视觉实验

Liquid Glass

用更克制的方式调试玻璃层次。选择质感、背景和细节参数，实时得到可直接使用的 CSS。

实时预览

换一个背景，看玻璃真正的层次

BITLEAP / GLASS

Liquid surface

一层安静的玻璃。背景仍然可见，但信息始终保持在前面。

BLUR

18px

SAT

180%

ALPHA

0.18

BACKDROP / 珍珠

CSS OUTPUT

可直接复制到项目中

.liquid-glass {
  position: relative;
  overflow: hidden;
  color: #17181b;
  background: color-mix(in oklab, white 18%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.458),
    inset 0 -18px 38px rgba(255,255,255,0.05),
    0 28px 70px rgba(16,24,40,0.22);
}

.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.298) 0%,
      rgba(255,255,255,0) 42%
    );
}

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

说明

使用 backdrop-filter、color-mix 与多层 inset shadow 构建玻璃质感。

如果浏览器启用了“减少透明度”，CSS 会自动降级成不透明背景。

真正的玻璃效果取决于玻璃后方是否有足够的颜色、纹理和明暗变化。