轻工具

毛玻璃效果生成器

调节模糊、饱和与背景渐变，实时预览毛玻璃卡片并复制 CSS

预设

点击套用后仍可逐项微调，参数自动保存在本机。

背景渐变
玻璃卡片
实时预览
Glass Card

毛玻璃预览文字

背景容器 CSS

  


  

    
卡片 CSS（含 backdrop-filter 与 webkit 前缀）

    
    

  






  
使用说明

  
    
    
  1. 先调背景：两支渐变色与角度决定底图，装饰圆制造色彩起伏。
    2. 
    
  2. 再调卡片：模糊控制磨砂程度，饱和度让透出的颜色更艳。
    3. 
    
  3. 底色透明度平衡通透与稳定，文字发虚就往上调。
    4. 
    
  4. 边框宽度、颜色与不透明度独立可调，圆角跟随整体风格。
    5. 
    
  5. 复制背景与卡片两段 CSS，粘到页面即可复现预览效果。
    6. 
  






  
属性与兼容

  

    backdrop-filter 兼容性如何？
    
现代浏览器已普遍支持，Safari 需要 -webkit- 前缀。本工具输出的 CSS 同时包含两行写法，旧的或不支持的浏览器会忽略它，卡片退化为普通半透明底色。

  

  

    backdrop-filter 和 filter 有什么区别？
    
filter 作用于元素自身内容，backdrop-filter 作用于元素背后的区域。毛玻璃要磨砂的是透出来的背景，所以用后者，两者经常配合使用。

  

  

    为什么我的页面没有玻璃感？
    
卡片背后必须有内容可透。纯白背景模糊后没有变化，先铺渐变或色块，再加装饰圆，玻璃感自然出现。

  

  

    文字看不清怎么办？
    
把底色不透明度往上调，或把底色换深换浅来拉开明度差。可读性优先于通透感，必要时再叠加投影增强分层。

  






  
常见问题

  

    毛玻璃卡性能要注意什么？
    
backdrop-filter 逐帧计算，开销比普通渲染高。控制模糊半径与数量，滚动列表里少用大模糊，静态区域使用最稳妥。

  

  

    参数会保存吗？
    
会。颜色、滑杆与勾选状态自动写入本机浏览器，下次打开恢复上次配方，清除站点数据即可删除。

  

  

    深色界面能用毛玻璃吗？
    
能。把底色换成深色并降低不透明度，边框提亮一些，玻璃感同样成立。照搬白色配方在深色上会显得发灰。

  

  

    装饰圆也要写进 CSS 吗？
    
建议要。装饰圆是玻璃感的重要来源，输出里虽没包含圆的代码，但照预览里的大小位置放两个色块即可复现。

  




          
界面截图
毛玻璃效果生成器 · 界面预览
界面预览

          

    
使用步骤
  1. 调背景渐变
    两支颜色与角度决定页面底图，装饰圆用同色系半透明叠加，玻璃感靠背后的层次衬托。
  2. 调卡片玻璃参数
    模糊控制磨砂程度，饱和度让透出的色彩更艳，底色透明度平衡通透与文字可读。
  3. 调边框与圆角
    半透明白边是毛玻璃的标志性细节，宽度与透明度微调即可，圆角跟随整体风格。
  4. 复制两段 CSS
    一段给背景容器，一段给玻璃卡片，backdrop-filter 与 webkit 前缀都已写好，粘上即用。

    
工具详细介绍
毛玻璃效果靠 backdrop-filter 实现：浏览器对元素背后的区域应用模糊与饱和滤镜，再叠一层半透明底色。背景的色彩与轮廓就这样透了出来，卡片同时保持自己的内容清晰。它与 filter 不同，filter 作用于元素自身内容，backdrop-filter 作用于背后的内容。白色描边与柔和投影是这类卡片的标配，边框在亮背景上勾出轮廓，投影把卡片抬起。底色的透明度决定通透程度，太透文字会糊，太实又失去玻璃感。
工具把场景拆成背景与卡片两部分：两支渐变色加角度构成底图，两枚装饰圆制造色彩起伏。卡片的模糊、饱和、底色透明度、边框与圆角相互独立，随调随见。输出两段 CSS，背景一段、卡片一段，已含 webkit 前缀，粘到页面即可复现预览。三种预设覆盖亮色、暗色与冰霜风格，点选后仍可继续微调。参数自动保存在本机浏览器，全部渲染在本地完成，不依赖任何服务。

    
原理与背景
backdrop-filter 把元素背后的区域作为输入做高斯模糊与饱和度调整，计算成本高于普通合成。大面积或大量元素同时使用会拖慢滚动。Safari 长期要求 -webkit- 前缀，本工具输出同时包含标准与前缀两行。不支持该属性的浏览器会忽略这两行，卡片退化为普通半透明底色，布局不受影响，属于平稳降级。模糊半径越大开销越高，20 像素以内是性能与观感的常见平衡点。
设计层面，毛玻璃在 2020 年前后随系统界面流行，核心是层次、透明与光感。使用时先看对比度：文字与背景之间要有足够的明度差，低透明度叠加在复杂图像上会失控。性能上优先给静态区域使用，滚动列表内的卡片慎用大模糊，可改用半透明底色。深浅两套配方分开调，深色界面靠提亮边框与降低底色透明度获得玻璃感，浅色界面靠白边与柔和投影。

    
典型使用场景
  1. 登录与弹窗
    登录卡片、弹窗与模态层适合毛玻璃：背景保留页面色彩，前景半透明聚焦输入。模糊把背后内容推远，注意力自然落在表单上，边框描一圈白，卡片轮廓就立住了。
  2. 仪表盘模块
    数据看板的模块卡片用统一玻璃配方，背景渐变加装饰圆，模块之间靠投影与边框区分。饱和度调高一些，图表配色能透过底色透出来，整体观感现代且统一。
  3. 移动端浮层
    底部抽屉、悬浮按钮与顶部栏用毛玻璃，观感与系统界面一致。移动端性能有限，模糊半径控制在 20 像素以内，浮层面积不要铺满全屏，滚动区域避免整屏模糊，电量与帧率都友好。

    
使用技巧
  • 卡片背后放高饱和渐变或色块，玻璃感才明显，纯白背景看不出效果。
  • 文字发虚就把底色不透明度往上调，或加深底色，可读性优先于通透感。
  • 深色界面用深色底色加低透明度，边框提亮一档，别照搬白色配方。

    
注意事项
  • 背景太素没玻璃感
    纯白或纯色背景上模糊等于没有变化，玻璃感来自背后的色彩与形状起伏。先给页面铺渐变或色块，再叠加装饰圆，卡片立刻有内容可透，观感从平板变成有层次。
  • 大面积模糊卡顿
    backdrop-filter 逐帧计算开销大，长列表每张卡片都模糊会明显掉帧，低端机尤其如此。控制模糊半径与数量，滚动容器内的卡片改用半透明底色代替，静态区域再上真模糊。
  • 文字对比不足
    底色透明度太低时文字与背景混在一起，可读性崩塌，小字号更明显。把底色不透明度提到四成以上，或按文字明度换底色，深色文字配浅底，浅色文字配深底。

  

          
相关工具