CSS 玻璃拟态生成器 - 在线创建毛玻璃效果
通过实时预览生成精美的毛玻璃CSS效果。自定义模糊、透明度、边框和阴影。
常见问题
什么是玻璃拟态（Glassmorphism）？
玻璃拟态是一种现代 UI 设计趋势，通过使用半透明背景、背景模糊和微妙的边框来创建磨砂玻璃效果。它因 Apple 的 macOS Big Sur 和 Windows 11 的 Fluent Design 而流行，通过让背景内容以柔和、模糊的外观透过元素显示，赋予元素深度感和层次感。该效果主要通过 backdrop-filter、半透明背景和细薄的亮色边框等 CSS 属性来实现。
如何使用这个玻璃拟态生成器？
调整模糊强度滑块来控制磨砂玻璃效果，然后使用颜色选择器和滑块设置背景颜色及其不透明度。启用或禁用边框和盒阴影，并微调其宽度、颜色、不透明度和圆角等参数。实时预览会即时更新，让您看到准确的效果。满意后，将生成的 CSS 代码直接复制到您的样式表中。
我的数据安全吗？会有任何内容发送到服务器吗？
是的，您的数据完全安全。此工具使用客户端 JavaScript 100% 在您的浏览器中运行——没有任何数据、配置或设计设置会被发送到任何服务器。所有 CSS 生成、预览渲染和颜色计算都在您的设备上本地进行，适合处理机密设计工作和客户项目。
什么是 backdrop-filter？它是如何工作的？
CSS backdrop-filter 属性对元素后方的区域应用模糊、亮度或对比度等图形效果。与影响元素本身的 filter 属性不同，backdrop-filter 只影响通过元素的透明或半透明背景可见的内容。在玻璃拟态中，backdrop-filter: blur() 是通过模糊面板下方内容来创建磨砂玻璃外观的关键属性。
哪些浏览器支持玻璃拟态 / backdrop-filter？
backdrop-filter 属性在全球超过 95% 的浏览器中得到支持，包括 Chrome 76+、Firefox 103+、Safari 9+ 和 Edge 79+。Safari 实际上是第一个使用 -webkit- 前缀实现此功能的主流浏览器。为了最大兼容性，建议同时包含 -webkit-backdrop-filter 和 backdrop-filter 声明，本生成器会自动处理这一点。
玻璃拟态如何影响性能？
backdrop-filter 模糊会触发 GPU 合成，如果过度使用可能会影响性能。每个模糊元素都会创建一个单独的合成层，浏览器必须独立渲染。为保持流畅性能，请限制同时可见的玻璃元素数量，使用适中的模糊值（8-20px），避免嵌套玻璃拟态元素，并确保模糊区域不会覆盖视口中过大的区域。
如何确保玻璃面板上的文字可读性？
为满足 WCAG 无障碍指南，请确保文字与玻璃背景之间有足够的对比度。提高背景不透明度（0.3-0.5）以获得更好的对比度，使用较高的模糊值使底层内容不那么分散注意力，并添加微妙的边框来界定面板边缘。在浅色玻璃面板上使用深色文字，在深色玻璃面板上使用浅色文字，并始终针对各种背景图片和颜色测试可读性。
代码示例
function hexToRgba(hex, opacity) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}
function generateGlassmorphismCSS(options = {}) {
const {
blur = 10,
bgColor = '#ffffff',
bgOpacity = 0.15,
borderEnabled = true,
borderWidth = 1,
borderColor = '#ffffff',
borderOpacity = 0.2,
borderRadius = 12,
shadowEnabled = true,
shadowX = 0,
shadowY = 4,
shadowBlur = 30,
shadowSpread = 0,
shadowColor = '#000000',
shadowOpacity = 0.1,
} = options;
const rules = [];
rules.push(`background: ${hexToRgba(bgColor, bgOpacity)};`);
rules.push(`-webkit-backdrop-filter: blur(${blur}px);`);
rules.push(`backdrop-filter: blur(${blur}px);`);
if (borderRadius > 0) {
rules.push(`border-radius: ${borderRadius}px;`);
}
if (borderEnabled && borderWidth > 0) {
rules.push(`border: ${borderWidth}px solid ${hexToRgba(borderColor, borderOpacity)};`);
}
if (shadowEnabled) {
rules.push(`box-shadow: ${shadowX}px ${shadowY}px ${shadowBlur}px ${shadowSpread}px ${hexToRgba(shadowColor, shadowOpacity)};`);
}
return rules.join('\n');
}
console.log(generateGlassmorphismCSS());
// background: rgba(255, 255, 255, 0.15);
// -webkit-backdrop-filter: blur(10px);
// backdrop-filter: blur(10px);
// border-radius: 12px;
// border: 1px solid rgba(255, 255, 255, 0.2);
// box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);