玻璃拟态 CSS 生成

调节玻璃拟态卡片的底色、透明度、模糊、边框和阴影，实时预览并导出可直接使用的 CSS 片段。

样式配置

移动端优先单列调参，桌面端再和预览区并排查看。

背景色

玻璃层颜色

玻璃透明度0.18

边框透明度0.22

模糊强度20px

圆角24px

阴影强度28px

预览与代码

统一展示实时预览和 CSS 输出，手机上也能顺着往下操作。

Glass Card

Pure browser glassmorphism

调整滑块后，卡片的透明层、模糊、圆角和阴影会实时更新，方便同时观察移动端和桌面端视觉效果。

CSS 输出

background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 24px;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);

玻璃拟态 CSS 生成

Pure browser glassmorphism

Command Palette