Liquid Glass：纯 CSS 打造液态玻璃 UI 的完整教程与代码示例

2025-08-28 Liquid Glass CSS 液态玻璃 1366 0

Liquid Glass 特效是什么？

Liquid Glass可以理解为玻璃拟物（glassmorphism）+ 高光折射 + 轻微流动感的组合视觉。核心并不依赖 JS 或 SVG 滤镜，而是用纯 CSS 的半透明层、阴影、渐变高光与 backdrop-filter 背景模糊，营造“有厚度、能折射、会流动”的玻璃质感。

基础版：纯 CSS 磨砂玻璃卡片

HTML

<section class="scene">
  <div class="glass-card">
    <h2>Liquid Glass</h2>
    <p>纯 CSS 磨砂玻璃卡片</p>
  </div>
</section>

CSS

/* 场景背景：带层次的色彩，便于看出模糊折射 */
.scene {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 600px at 10% 10%, #7dd3fc 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 30%, #f0abfc 0%, transparent 55%),
    radial-gradient(1000px 600px at 50% 90%, #fca5a5 0%, transparent 60%),
    #0b1020;
}

/* 玻璃卡片主体 */
.glass-card {
  width: clamp(280px, 36vw, 560px);
  padding: 28px 32px;
  border-radius: 24px;
  /* 半透明底色 + 细边，制造“玻璃厚度” */
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255,255,255,.28);
  /* 背景模糊 + 略增饱和，像磨砂玻璃 */
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  /* 内外阴影叠加，强调边缘与厚度 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 20px 40px rgba(0,0,0,.35);
  color: #e9edf5;
}

/* 轻微高光：斜向“玻璃反射” */
.glass-card::before {
  content: "";
  position: absolute;
  inset: -1px;           /* 覆盖整个卡片边缘 */
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,0) 35% 65%,
      rgba(255,255,255,.18) 100%);
  mix-blend-mode: screen;
  filter: blur(0.2px);
}

要点

backdrop-filter: blur() 让卡片“模糊其后的背景”，是玻璃质感的关键。
细边 + 内阴影 + 外阴影，让元素像“有厚度的玻璃砖”。

进阶版：带“液态流光”的玻璃按钮

HTML

<button class="liquid-btn">
  立即体验
</button>

CSS

.liquid-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 14px 22px;
  border-radius: 999px;
  font: 600 16px/1.1 ui-sans-serif, system-ui;
  letter-spacing: .2px;
  color: #0b1020;
  /* 玻璃底 + 背景模糊 */
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 8px 24px rgba(0,0,0,.25);
  overflow: clip;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* 流动高光（液态感）：用 conic-gradient 做“旋转反射带” */
.liquid-btn::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(255,255,255,.0) 0deg,
      rgba(255,255,255,.65) 30deg,
      rgba(255,255,255,0) 60deg 300deg,
      rgba(255,255,255,.65) 330deg,
      rgba(255,255,255,0) 360deg);
  animation: spin 4s linear infinite;
  filter: blur(16px);
  opacity: .65;
  pointer-events: none;
}

/* 顶部玻璃亮边 */
.liquid-btn::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 40%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity: .7;
}

.liquid-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 12px 28px rgba(0,0,0,.32);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

要点

conic-gradient 画出“扫光带”，配合模糊产生柔和的液态反射。
使用伪元素 ::before/::after 分离“流光”和“亮边”，互不干扰。

高阶版：玻璃“液滴”卡片（内部有流动质感）

HTML

<div class="drop">
  <h3>Glass Drop</h3>
  <p>内部流动的液态玻璃视觉</p>
</div>

CSS

.drop {
  position: relative;
  width: min(82vw, 720px);
  margin: 6vh auto;
  padding: 28px 32px 36px;
  border-radius: 32px;
  color: #e9edf5;

  /* 玻璃主体：透明底 + 背景模糊 + 边框/阴影 */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 24px 60px rgba(0,0,0,.45);
  overflow: clip;
}

/* 内部“液体”——多重径向渐变缓慢位移，营造流动与折射 */
.drop::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(180px 140px at 20% 30%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(220px 160px at 80% 40%, rgba(255,255,255,.18), transparent 65%),
    radial-gradient(320px 200px at 40% 85%, rgba(255,255,255,.12), transparent 70%);
  filter: blur(18px) saturate(140%);
  animation: drift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

/* 斜向高光条 */
.drop::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(110deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,0) 40% 60%,
      rgba(255,255,255,.16) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes drift {
  0%   { transform: translate(-2%, -3%) scale(1); }
  50%  { transform: translate(3%, 2%)  scale(1.03); }
  100% { transform: translate(-1%, 3%) scale(1.05); }
}

要点

多个 radial-gradient 叠加并缓慢位移，像液体在玻璃内部“晃动”。
整体仍是纯 CSS：没有图像、没有 JS、没有 SVG 过滤器。

适配与性能建议

优雅降级：为不支持 backdrop-filter 的环境提供可读 fallback（例如透明白背景 + 常规阴影）。
减少重绘：动画元素尽量用伪元素，适当加入 will-change: transform;。
无障碍/偏好：尊重用户“减少动态效果”偏好。
色彩对比：玻璃层建议在深色/高饱和背景上使用，更易体现折射层次。

Fallback 片段（可混入上方任一示例）

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card,
  .liquid-btn,
  .drop {
    background: rgba(255,255,255,.12); /* 退化为半透明+阴影 */
  }
}

/* 遵循减少动画 */
@media (prefers-reduced-motion: reduce) {
  .liquid-btn::before,
  .drop::before { animation: none; }
}

借助现代 CSS 的滤镜与渐变，我们可以仅用 HTML+CSS 就构建出层次丰富、富有“厚度与流动”的 Liquid Glass 视觉。把以上三个示例按需组合，你就能在按钮、卡片、导航、面板等组件上快速落地液态玻璃风格。

网友点评

提交

概要

Liquid Glass 特效是什么？
基础版：纯 CSS 磨砂玻璃卡片
进阶版：带“液态流光”的玻璃按钮
高阶版：玻璃“液滴”卡片（内部有流动质感）
适配与性能建议