玻璃拟态生成器

创建带背景模糊、透明度和边框的磨砂玻璃 UI 卡片，然后复制 CSS。

预览

悬浮在鲜艳背景之上的磨砂玻璃。

背景

CSS 输出

—

同时输出 backdrop-filter 和 -webkit-backdrop-filter。注意：旧版浏览器（如 Firefox 103 以下）不支持 backdrop-filter；请为这些浏览器添加纯色回退背景。

模糊

饱和度

圆角半径

玻璃填充

透明度 20%

边框

边框不透明度 30%

外轮廓阴影

质量预设

关于玻璃拟态生成器

玻璃拟态（Glassmorphism）生成器可以打造磨砂玻璃卡片效果：一个半透明面板，会将其背后的一切模糊化。滑块控制 backdrop-filter 的模糊度和饱和度、玻璃色调及其透明度、边框颜色与不透明度、圆角以及外部阴影——每次改动都会实时渲染在一个色彩鲜明的背景之上，方便你真实判断效果。

四种质感预设——轻盈、磨砂、鲜艳和暗色玻璃——提供了经过验证的组合作为起点。暗色预设展示了同一套方案如何适配深色界面，在那里，一条淡淡的浅色边框承担了将玻璃与背景区分开的大部分工作。

生成的 CSS 同时包含 backdrop-filter 以及 Safari 所需的 -webkit-backdrop-filter 前缀。请注意兼容性问题：较旧的浏览器（例如 103 版本之前的 Firefox）不支持 backdrop-filter，因此请为它们提供一个纯色的回退背景。

面板本身使用半透明背景色，backdrop-filter: blur() 将其背后渲染的内容模糊化。提升饱和度可以让被模糊的颜色保持鲜活，而一条淡淡的半透明边框则强化了玻璃边缘的质感。

backdrop-filter 需要元素本身具有半透明背景，并且浏览器要支持该特性——Firefox 直到 103 版本才启用它。Safari 需要 -webkit-backdrop-filter 前缀，生成的 CSS 中已经包含。请始终定义一个纯色的回退背景。

关键在于对比度管理。增加模糊度或降低透明度，直到文字在最杂乱的背景下也能满足对比度规范，并添加边框，让卡片边缘在明暗区域上都清晰可见。

这是成本较高的 CSS 效果之一，因为浏览器会在内容移动时不断重新模糊背景。建议只在少数关键表面上使用，而不是在几十张叠放的卡片上使用，并在中端移动设备上测试滚动表现。

是的，完全免费且基于浏览器——无需账户、无需上传，随意调整滑块并复制 CSS。