CSS 玻璃态生成器
创建惊艳的玻璃态CSS效果。磨砂半透明玻璃UI，带模糊、透明度、边框、饱和度控制和可复制代码。
CSS Glassmorphism Generator
Preview
Glass Card
This is a glassmorphism effect preview. Adjust the controls to customize the blur, opacity, saturation, and border properties.
CSS Code
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}What is CSS 玻璃态生成器?
CSS玻璃态生成器是一款可视化设计工具，创建流行的玻璃态UI美学，带有半透明磨砂玻璃模糊、分层透明度和细微边框高光。玻璃态在Apple macOS Big Sur和iOS重新设计后成为主导设计趋势，其特征是：带有backdrop-filter模糊的半透明背景（应用于元素下方的内容）、用于边缘定义的细白色或彩色内部边框、用于浮动效果的细微阴影、可选的饱和度提升（使玻璃后面的颜色更突出），以及通过box-shadow inset属性的内部高光。正确重现此效果需要同时精确调整多个CSS属性：rgba alpha透明度值、以像素为单位的backdrop-filter模糊半径、边框厚度/不透明度/颜色、内部发光强度、backdrop-filter saturate饱和度提升和分层阴影控制。它还包括使用背景模糊或SVG过滤器的旧浏览器兼容性回退，以及无JavaScript的纯CSS解决方案。预设主题包括Light Glass（与深色模式兼容的Dark Glass、Vibrant iOS风格的Frosted和macOS Window Chrome风格玻璃），帮助您一键实现特定的平台美学。输出代码包括现代版本和渐进增强回退。
When to Use CSS 玻璃态生成器
用于设计磨砂玻璃导航栏、半透明模态框和对话框、玻璃卡片悬停效果、macOS风格窗口Chrome、iOS磨砂小部件，或任何具有深度和层次感的现代UI。
How to Use CSS 玻璃态生成器
使用交互式控件调整透明度、模糊半径、边框样式、饱和度和阴影。选择预设的玻璃主题。复制带浏览器回退的完整CSS以实现最大兼容性。