设计稿玻璃态毛玻璃效果怎么做

本文目录导读：

1. 核心参数（设计稿通用）
2. 操作步骤（以 Figma 为例）
3. 常见问题与避坑指南
4. 进阶技巧（让效果更高级）
5. 不同设计软件中的对应术语

玻璃态（Glassmorphism）也叫毛玻璃或拟态玻璃，是近几年非常流行的 UI 设计风格，核心特征是：背景模糊 + 半透明 + 微妙的边框与阴影，营造一种“透过磨砂玻璃看背景”的质感。

要在设计稿（如 Figma、Sketch、Adobe XD）中做出标准的毛玻璃效果，核心步骤是一致的，下面以 Figma 为例（其他软件逻辑相同）详细拆解。

核心参数（设计稿通用）

你需要调整一个形状（矩形、卡片）的四个属性：

1. 填充（Fill）
   • 类型：Solid（实色） 或 Linear Gradient（线性渐变）
   • 颜色：使用半透明白色或半透明浅色（如 #FFFFFF 不透明度 10% ~ 30%）
     • 注意：不要用纯白色加低透明度，那样会显得很脏。
2. 背景模糊（Background Blur）
   • 这是毛玻璃的灵魂，参数值通常在 20px - 40px 之间，根据效果微调。
3. 描边（Stroke）
   • 内部描边（Align to Inside 或 Center）。
   • 颜色：半透明白色（如 #FFFFFF 不透明度 20% ~ 30%），模拟玻璃边缘的反光。
4. 阴影（Drop Shadow / Box Shadow）
   • 增加一层或多层阴影,增加立体感和“悬浮”感。
   • 颜色通常使用深色（如 #000000 不透明度 15% ~ 30%），模糊值较大（10px - 30px），Y轴偏移较小（2px - 8px）。

操作步骤（以 Figma 为例）

1. 准备一个彩色渐变背景（毛玻璃必须依赖丰富、有对比的背景才能体现出效果，纯白背景不行）。
2. 绘制卡片，使用矩形工具画一个卡片。
3. 添加半透明填充：
   • 在右侧属性面板 Fill 中，选择 Solid。
   • 颜色选 白色，将不透明度（Opacity）降低到 10% ~ 20%。
4. 添加背景模糊：
   • 在 Effects 部分，点击 。
   • 选择 Background blur。
   • 将 Radius 设为 30px。
   • 重要提示：Figma 中，只有同时存在半透明填充时，背景模糊才会生效。
5. 添加描边：
   • 在 Stroke 部分，点击 。
   • 颜色选 白色，不透明度设为 20% ~ 30%。
   • Weight 设为 1px。
6. 添加阴影：
   • 点击 Effects 的 ，选择 Drop shadow。
   • 参数示例：X: 0 Y: 4px Blur: 20px Color: #000000 25%
   • 可以再加一层更柔和的阴影：X: 0 Y: 15px Blur: 40px Color: #000000 15%

完成效果预览：

卡片看起来像是半透明的磨砂玻璃,背景的图案/颜色被模糊地透出来，边缘有一圈发光描边，下方带有柔和的投影。

常见问题与避坑指南

进阶技巧（让效果更高级）

1. 内发光代替描边：在某些软件中，可以用 Inner shadow 或者 内发光（白色、不透明度 30%、模糊 1px）来模拟玻璃边缘的折射光，效果更柔和。
2. 使用渐变填充：用线性渐变作为填充（顶部 #FFFFFF 30% 到底部 #FFFFFF 5%），模拟光线从上方照射玻璃的衰减效果。
3. 叠加“噪点”纹理：在卡片最上层覆盖一个包含细微噪点（噪声）的透明图层（混合模式设为 叠加 或 柔光），可以模拟真实的磨砂物理质感。
4. 动画交互：在原型中，让毛玻璃卡片跟随鼠标略微位移，或者让背景在卡片下方缓慢流动，效果非常惊艳。

不同设计软件中的对应术语

总结一句话： 半透明白色填充 + 20-40px背景模糊 + 1px半透明白色描边 + 柔和投影 = 标准毛玻璃。

标签： 毛玻璃 玻璃态