CSS Glassmorphism Generator

Design glassmorphism UI effects with backdrop-filter. Control blur, saturation, opacity, border, and shadow. Live preview and ready-to-copy CSS code.

模糊强度12px

背景透明度25%

饱和度120%

边框透明度20%

基色

毛玻璃效果

调节左侧参数查看实时效果

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.20);

Design Tools · Related Tools

→