玻璃拟态通过 CSS backdrop-filter: blur()、半透明背景和微妙边框创造毛玻璃效果。由 Apple 的 macOS 和 iOS 界面推广，这种风格通过层叠半透明表面创造深度感。有效玻璃拟态的关键是有一个活跃的背景（渐变或图像），透过模糊的玻璃层显现，在不造成视觉杂乱的情况下创造视觉丰富度。
在渐变背景上创建玻璃拟态卡片布局。背景使用从 #667eea 到 #764ba2 的 linear-gradient。卡片使用 background rgba(255,255,255,0.15)、backdrop-filter blur(12px)、1px solid rgba(255,255,255,0.2) 边框和 16px border-radius。每张卡包含图标、标题和说明，并排列为响应式三列网格。添加轻微 box-shadow 表现层次；文字统一使用白色，通过不同 opacity 建立信息层级。使用 shadcn/ui 构建玻璃拟态仪表盘，背景采用紫色、蓝色和青色组成的 mesh gradient。所有卡片使用 backdrop-blur-xl、bg-white/10 和 border-white/20。页面包含浮动统计卡、顶部 glass navbar，以及带玻璃效果的用户资料下拉菜单。所有容器使用 rounded-2xl；文字统一为白色，标题 opacity 100%、正文 80%、muted 文字 50%，以此建立层级。在 Next.js 和 Tailwind 中实现 Apple 风格的 liquid glass 设计系统。创建 glass() utility，组合 bg-white/10 dark:bg-black/10、backdrop-blur-2xl、border border-white/20 和 shadow-lg。基于这套 glass treatment 构建 modal、dropdown、sidebar 和 tooltip。背景使用渐变和由 CSS radial-gradient 绘制的浮动彩色圆形，让色彩透过玻璃层产生动态变化。生成 glassmorphism 风格的 React 组件，包括 GlassCard、GlassButton、GlassInput、GlassModal 和 GlassNavbar。每个组件都使用 backdrop-filter: blur(16px)、background: rgba(255,255,255,0.1) 和 border: 1px solid rgba(255,255,255,0.18)，hover 时提高背景 opacity。提供基于白色的 light glass variant 和基于黑色的 dark glass variant，使用 Tailwind CSS 自定义 utility class 实现。设计玻璃拟态音乐播放器卡。专辑封面铺满卡片背景，控制面板作为 glass layer 覆盖其上，使用 background rgba(255,255,255,0.12)、backdrop-filter blur(20px) saturate(160%)、border 1px solid rgba(255,255,255,0.25) 和 border-radius 24px。进度条轨道高 4px、颜色 rgba(255,255,255,0.2)，填充为纯 #ffffff，thumb 为 12px。曲名使用 18px semibold white，艺人名使用 14px 和 70% opacity。播放按钮是 56px 纯白圆形并使用深色图标，上一首与下一首按钮使用 glass circle。所有控件提供 aria-label，触摸目标至少 44px；必要时加深文字后的玻璃层，确保文字在模糊背景上达到 4.5:1 对比度。使用 shadcn/ui 构建玻璃拟态定价区。背景以 #0f0a1e 为底，叠加由 #7c3aed、#2563eb 和 #0ea5e9 构成的固定 mesh gradient。三档价格卡使用 backdrop-blur-2xl bg-white/10 border border-white/20 rounded-3xl p-8；Pro 档使用 bg-white/15、更亮的 border-white/40，以及纯白 CTA 按钮和 #1e1b4b 文字。价格使用 48px tabular-nums white，功能列表的 check 图标 opacity 为 80%。卡片 hover 时 translate-y-1，并在 200ms 内把背景提高到 /15。正文至少使用 white/85；通过 @supports not (backdrop-filter: blur(1px)) 提供纯色 fallback background。在 Next.js 中创建三步 onboarding flow，玻璃拟态面板居中覆盖在动画渐变上。conic-gradient 在 #f472b6、#818cf8、#34d399 之间缓慢旋转，时长 30s、linear，并在 prefers-reduced-motion 下暂停。面板宽 480px，使用 rgba(255,255,255,0.08)、blur(24px)、1px rgba(255,255,255,0.18) 边框、28px radius 和 40px padding。步骤指示器由三个 8px 圆点组成，active 圆点拉伸为 24px 白色 pill。input 使用较深的 glass 背景 rgba(0,0,0,0.2)，让白色文字达到 4.5:1 对比度；上方保留 white/90 label，不能只用 placeholder。primary button 使用纯白背景和深色文字，secondary button 使用 glass outline。步骤切换采用 250ms fade 和 16px slide。生成 glassmorphism 风格的 React 天气组件，并为天气状况、温度和逐小时预报定义 TypeScript props。容器为 360px 卡片，使用 background rgba(255,255,255,0.14)、backdrop-filter blur(18px)、border 1px solid rgba(255,255,255,0.28) 和 border-radius 20px；卡片置于随天气变化的天空渐变上，晴天从 #38bdf8 到 #0369a1，夜间从 #1e293b 到 #020617。温度使用 64px light，天气标签为 16px、85% opacity；逐小时区域包含 6 个 glass chip，每个使用 rgba(255,255,255,0.1)、12px radius 和 13px label。天气图标使用 1.5px 白色 stroke 的 SVG。容器设置 role=region 和 aria-label，例如 'Current weather'；backdrop-filter 不可用时回退为纯 rgba(30,41,59,0.9)。玻璃拟态是一种模拟毛玻璃的设计风格，使用 CSS backdrop-filter: blur()、半透明背景（rgba）和微妙的亮色边框。它通过在活跃背景上层叠半透明表面来创造深度感。这种效果通过 Apple 的 macOS Big Sur 和 iOS 设计更新而成为主流。
使用这些 Tailwind 类：'backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl shadow-lg'。暗色玻璃：'backdrop-blur-xl bg-black/10 border border-white/10'。关键是在玻璃元素后面要有彩色背景。添加 'backdrop-saturate-150' 获得更丰富的色彩透出。
backdrop-filter 可能影响渲染性能，尤其是在移动设备上使用大模糊值时。缓解策略：限制模糊值为 12-20px、避免嵌套多个玻璃层、在玻璃元素上使用 will-change: transform、为不支持 backdrop-filter 的浏览器提供纯色回退。现代浏览器在典型使用场景下处理良好。
最佳区间是 blur(12px) 到 blur(24px)。低于 8px 时背景仍然清晰可辨，会和前景文字抢注意力；超过 30px 表面就像不透明的磨砂塑料，玻璃错觉消失了，渲染开销却一分不少。按元素尺寸调整：小型标签和按钮 10-12px 合适，卡片 16-20px，全屏弹窗和导航栏 20-24px。将 blur 与 saturate(150%-180%) 搭配，让透出的色彩保持鲜活而不是发灰。移动端整体降一档（如 20px 降到 12px）以保住帧率。
常见原因有三个。第一，背景太平：玻璃需要背后有彩色渐变或图像——在纯白或纯灰上，blur 没有东西可以扩散，应加入渐变光斑或 mesh 背景。第二，填充不透明度不对：rgba(255,255,255,0.4) 以上会完全遮住背景，应保持在 0.08-0.2 区间。第三，缺少边框：1px solid rgba(255,255,255,0.2) 的边缘正是「玻璃片」质感的来源——没有它卡片会融进背景里。另外确认 backdrop-filter 没有失效：某些浏览器中祖先元素同时设置 overflow 和 transform 会破坏该属性。