设计 / CSS

Glassmorphism CSS生成器（磨砂玻璃效果）

使用CSS backdrop-filter创建磨砂玻璃效果：在彩色预览上调整模糊、色调、透明度、饱和度、边框和圆角半径，并复制可在所有当前浏览器中运行的CSS。

Glassmorphism CSS生成器（磨砂玻璃效果）: backdrop-filter: blur()会模糊元素后面的内容，saturate()则会让这些颜色更加鲜艳。半透明背景为玻璃添加色调，淡淡的浅色边框则能像真实玻璃一样勾勒出边缘。带-webkit-前缀的代码行可兼容18之前版本的Safari。 完全在浏览器中本地运行，文件不会上传到服务器。

类别
开发者工具
使用次数
在浏览器中
费用
免费·无需注册
可用性
可直接使用
玻璃拟态生成器本地处理

完全在浏览器中运行

毛玻璃此卡片后面的颜色经过了模糊处理。

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

此效果需要在元素后方放置彩色内容：backdrop-filter会模糊下方的内容，半透明背景则会让这些内容透出来。-webkit-这一行用于18之前版本的Safari。请检查玻璃效果上的文字在背景的每个部分上都保持足够的对比度。

无障碍

一些读者会在系统设置中启用降低透明度功能。基于Chromium的浏览器支持prefers-reduced-transparency媒体查询，可以为这些用户将玻璃效果替换为纯色背景。

与阴影搭配

柔和而宽大的阴影可以让卡片从背景中浮起；使用盒阴影生成器调整阴影，然后替换box-shadow代码行。

使用方法

  1. 设置模糊、透明度和饱和度。
  2. 选择色调、边框和圆角半径。
  3. 复制CSS，并将该元素放在彩色背景上。

隐私与限制

所有操作都在你的浏览器中运行。

相关工具

盒阴影CSS渐变CSS图案

常见问题

为什么我的玻璃效果看起来很普通？

元素后面必须有彩色或细节丰富的内容；如果背景是纯色，模糊就没有可供模糊的内容。

backdrop-filter运行速度慢吗？

它的性能开销高于大多数CSS，尤其是在大面积区域覆盖移动内容并滚动时；请缩小模糊区域，并避免叠加使用太多模糊效果。

文字是否清晰易读？

请实际检查：背景变化会影响对比度。使用更深的色调、更高的透明度或文字阴影会有所帮助。

免费工具·使用在浏览器中次·无需账户