返回免费在线工具集合

毛玻璃效果生成器

调节背景模糊、透明度、边框与圆角,生成毛玻璃(Glassmorphism)风格卡片并复制 CSS。

设计 独立定制 输出:网页 免费使用 发布时间: 阅读量:5 作者:马慧
正在加载工具…

糊多少与透多少

"鹭江控制台"的白澍要一张压在背景上的玻璃卡片。前两个滑块"背景模糊"拖到 16、"背景透明度"拖到 24,玻璃颜色保持 #ffffff。24 换成 0.24、16 换成 blur(16px),框里立刻出现 background: rgba(255, 255, 255, 0.24); 与两行 backdrop-filter,带前缀那行也补齐了。

背景模糊调到 16、背景透明度 24

只能调边框透明度

"圆角"拖到 20、"边框透明度"拖到 40,框里随之补出 border: 1px solid rgba(255, 255, 255, 0.40); 和 border-radius: 20px;。40 换算成 0.40,1px solid 是写死的;面板上既没有边框宽度,也没有边框颜色可动。改这两个值不用另点确认。

圆角 20、边框透明度 40

五行一起读

只读 textarea 里逐行是 background、backdrop-filter、-webkit-backdrop-filter、border、border-radius 共 5 行,中间两行成对出现,白澍要的"背景模糊 16"就落在那里。框本身不接受手改,想动数值得回去拖滑块。这 5 行是同一张卡片的一套样式,别拆开看。

看「复制 CSS」框里的 backdrop-filter

预览看不清别急

.zab-preview 这次"看着不明显",源码只给舞台加了 "is-glass" 这个 class,没给预览卡片铺底层图案,下层没内容时模糊本来就看不出来,这不代表样式没生效,以那 5 行为准。确认后点按钮把声明带走,页面不落文件。

看玻璃卡片的预览效果

企业知识网( www.qiyezhishi.com )提供的结果为参考性内容,不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。

本文作者

马慧,企业知识网站长,10年+SEO/GEO经验,精通白帽SEO与网站优化,擅长全网营销与短视频引流,曾打造日均万IP的SEO博客(小小课堂网)、十万IP泛流量资讯网站(错误博客)。自川来熟食连锁店长,5年熟食生产与管理经验,精通抖音本地生活服务运营。