毛玻璃效果生成器

如何使用毛玻璃效果生成器

关于毛玻璃效果生成器的常见问题

毛玻璃效果生成器会上传我的图片吗？

不会。毛玻璃效果生成器的参数调节、代码生成和对比度估算都在你的浏览器本地完成；选作预览背景的本地图片只通过 object URL 交给浏览器显示，不读取内容、不发送到服务器，换图或离开页面时立即释放。（站点自身仅有匿名访问量统计，与你调的参数和图片无关。）

手机上能用毛玻璃效果生成器吗？

可以，不用装 App。毛玻璃效果生成器是纯网页实现，手机、平板和电脑浏览器打开即用；窄屏下预览在上、参数在下，滑杆和数字框都能触屏操作，数字框保留了草稿态，逐字符重输不会被吃掉。iPhone 上的 Safari 同样支持背景模糊，可以直接在手机上看真实的 iOS 毛玻璃效果。

CSS 毛玻璃效果的代码怎么写？

CSS 毛玻璃效果由三件事组成：半透明的背景色、backdrop-filter: blur() 把元素背后的内容模糊掉、再加一圈半透明白色边框和柔和阴影勾出玻璃边缘。本工具的默认参数就是一套可直接用的毛玻璃 CSS 代码，页面下方「默认参数生成的完整代码」一节贴出了全文；要注意 backdrop-filter 模糊的是元素背后的内容，所以玻璃下面得有图片或彩色背景才看得出效果。

backdrop-filter 毛玻璃不生效是什么原因？

backdrop-filter 不生效最常见有四个原因：一是底色完全不透明，模糊被盖住了；二是元素背后没有内容（纯白页面上模糊白色还是白色）；三是祖先元素写了 filter、opacity 小于 1、mask、mix-blend-mode 或另一个 backdrop-filter，形成了新的 Backdrop Root，模糊只能采到那个祖先内部的内容；四是旧版 Safari 只认 -webkit-backdrop-filter，缺前缀就没效果。本工具会对前两种情况给出提示，并默认同时输出带前缀与不带前缀的两行。

毛玻璃效果还需要加 -webkit- 前缀吗？

建议保留。Chrome、Edge 76 起和 Firefox 103 起都支持无前缀的 backdrop-filter，但 Safari 9 到 17 只认 -webkit-backdrop-filter，Safari 18 才支持无前缀写法，而 iPhone 上的浏览器都用 Safari 内核，旧系统用户仍然不少。所以本工具默认输出两行，带前缀的写在前、标准写法写在后，层叠时以标准属性为准。

毛玻璃上的文字看不清怎么办？

毛玻璃文字看不清，通常是底色太透、背景又有亮色块。办法有三：把玻璃底色的不透明度提高到 0.3 以上；换和背景反差更大的文字颜色（花背景上白字配深色玻璃、深色字配浅色玻璃）；适当调低 backdrop-filter 的亮度或提高模糊，让背景更均匀。本工具会把当前背景场景的代表色、它们之间的过渡色和光泽渐变两端都算进去，估算玻璃上文字的最差对比度，低于 4.5:1 时给出提示；文字亮度落在背景深浅之间时会如实报 1:1，因为总有一处过渡色和文字一样亮。

Tailwind 怎么写毛玻璃效果？

切到「Tailwind」标签就能拿到整串类名，例如默认参数对应 backdrop-blur-[12px] backdrop-saturate-[1.6] bg-[rgba(255,_255,_255,_0.18)] border-[1px] border-[rgba(255,_255,_255,_0.3)] rounded-[16px] shadow-[0_8px_32px_rgba(0,_0,_0,_0.15)]。本工具一律用任意值写法，不把 160% 硬凑成内置的 backdrop-saturate-150，避免数值漂移；值里的空格已按 Tailwind v3 任意值语法转义成下划线。@supports 降级无法用单个工具类表达，需要时把 CSS 标签里的降级块写进全局样式。

backdrop-filter 和 filter blur 有什么区别？

backdrop-filter 模糊的是元素背后的内容，元素自身的文字和边框保持清晰，这才是毛玻璃；filter: blur() 模糊的是元素自己，连上面的文字一起糊掉，常用来做背景图虚化。另外 filter 会让元素成为新的 Backdrop Root，把它写在毛玻璃的祖先上会让 backdrop-filter 只采到祖先内部的内容，看起来像没生效。

毛玻璃效果会不会让页面卡顿？

可能会，但只在大面积、动起来的时候明显。backdrop-filter 每帧都要把元素背后的区域重新取样并模糊，模糊半径越大、元素面积越大、背后内容滚动越频繁，开销就越高。本工具在模糊超过 24px 时会提示低端手机可能掉帧；毛玻璃导航栏这类全宽、随滚动重绘的元素，建议把模糊控制在 10 到 20px，并避免多层毛玻璃互相叠加。

毛玻璃效果生成器 - 在线可视化生成 CSS 毛玻璃代码

毛玻璃（也叫磨砂玻璃、玻璃拟态，英文 glassmorphism、frosted glass）是一种让元素像半透明磨砂玻璃一样透出背后模糊内容的界面风格，iOS 的控制中心和 macOS 的侧边栏就是最常见的 iOS 毛玻璃效果。用 CSS 毛玻璃实现它只需要一个关键属性 backdrop-filter，再配合半透明背景、细边框和柔和阴影。本页的 glassmorphism 生成器把这几项做成滑杆，换背景实时预览，产出的就是可直接复制的毛玻璃效果 CSS；无论你搜的是 glassmorphism css、frosted glass css、css glass effect、glassmorphism generator 还是 backdrop-filter 生成器，说的都是这件事——做一块毛玻璃卡片、一条毛玻璃导航栏，或者一层半透明模糊背景。玻璃拟态 CSS、磨砂玻璃效果 CSS、毛玻璃背景 CSS 这几种叫法，落到代码上也都是同一组声明。

默认参数生成的完整代码

下面是打开页面时默认参数对应的毛玻璃 CSS 代码，由本站同一个生成函数现算输出，复制即可用。降级块里的底色不透明度取 0.85，这是本站取的可读性经验值，不是规范值。

.glass {
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.85);
  }
}

毛玻璃各参数含义与常用取值

各预设的 backdrop-filter 现算值：浅色玻璃 blur(12px) saturate(160%)；深色玻璃 blur(16px) saturate(140%) brightness(90%)；iOS 风磨砂 blur(20px) saturate(180%) brightness(110%)；彩色玻璃 blur(14px) saturate(150%)；强模糊卡片 blur(32px) saturate(120%)；细边高光 blur(10px) saturate(160%) brightness(105%)。

本工具的阴影形状固定为柔和的卡片投影，要精调多层阴影可以用盒阴影生成器； 想给玻璃后面换一张自定义渐变背景，可以先用CSS 渐变生成器生成背景代码。

backdrop-filter、filter 与 opacity 的区别

backdrop-filter 兼容性与 -webkit- 前缀