Glassmorphism

A translucent panel with backdrop blur — frosted glass floating over the scene

All platformsMotion & BackgroundsContent areaEffect

Live preview (drag the parameters, watch it change)

Change background：

Blur 14px Tint opacity 0.22 Radius 20px Border brightness 0.5

Code

<div class="glass-card">…</div>

<style>
.glass-card {
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.25);
}
</style>

<!-- Tailwind 任意值写法（backdrop-blur 需 backdrop 在场） -->
<div class="rounded-[20px] border border-white/50 bg-white/[0.22] shadow-[0_18px_40px_rgba(10,10,10,0.25)] backdrop-blur-[14px] backdrop-saturate-150">
  …
</div>

export function GlassCard({ children }) {
  return (
    <div style={{
      background: "rgba(255,255,255,0.22)",
      backdropFilter: "blur(14px) saturate(1.4)",
      WebkitBackdropFilter: "blur(14px) saturate(1.4)",
      border: "1px solid rgba(255,255,255,0.5)",
      borderRadius: 20,
      boxShadow: "0 18px 40px rgba(10,10,10,0.25)",
    }}>{children}</div>
  );
}

Code snippets are MIT-licensed — copy and adapt freely.

How this effect works

它是怎么工作的（中文）

核心就一句 CSS：backdrop-filter: blur() 把面板背后的画面实时磨糊，再叠一层半透明白压出玻璃的亮边。模糊半径决定「磨砂程度」，透明度决定「玻璃厚度」。注意两点：背景必须有内容可糊（纯色背景上看不出效果）；低端安卓机上大面积 backdrop-filter 会掉帧，面积要克制。

How it works (English)

One CSS line does the work: backdrop-filter: blur() frosts whatever sits behind the panel in real time, and a translucent white fill adds the glassy sheen. Blur radius sets the frost level; opacity sets the glass thickness. Two caveats: the background needs actual content to frost (a flat color shows nothing), and large backdrop-filter areas can drop frames on low-end Android — keep the area modest.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

Matching prompt

Glassmorphism PromptStale · →