CSS毛玻璃效果生成器

4.1 /5 - 189 次投票

轻松创建现代玻璃态UI效果

通过简单的参数调整,实时生成精美的CSS毛玻璃效果代码,直接应用到你的项目中

毛玻璃效果(Glassmorphism)是一种半透明模糊效果,常用于现代UI设计

参数设置

0px 50px
0 1
0 1
0px 50px

实时预览

毛玻璃效果示例

这是一个应用了毛玻璃效果的元素

生成的代码

.glass {

  backdrop-filter: blur(12px);

  background: rgba(255, 255, 255, 0.15);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 16px;

}

提示:毛玻璃效果通常需要在有背景图片或渐变的元素上才能更好地展示效果。

使用说明

调整参数

通过左侧控制面板调整模糊半径、透明度等参数,实时查看效果变化

复制代码

参数调整满意后,点击"复制代码"按钮获取CSS代码

应用到项目

将复制的CSS代码粘贴到你的项目样式中,为元素添加glass类名

分享评分

如果你喜欢这个工具,请给我们评分并分享给更多开发者

世界节日查询 24字加密工具 英文缩写工具 gif缩放-在线 GIF图片尺寸调整工具 在线OneNote笔记整理工具 黄大仙灵签 在线文本去重工具 SHA加密 在线视频添加转场效果工具 零息国债收益计算器 四次方根计算器 网页定时刷新 PDF文件包工具 在线字体格式转换工具 温度单位换算 在线图片卡通化工具 DES加密解密工具 黄金理财计算器 随机MAC地址 在线石墨文档协作管理工具 IP地址归属地查询 在线云风扇 PDF旋转工具-在线免费旋转PDF页面 图片转Base64-免费在线图片格式转换工具 特殊符号大全 在线JSON转Cookie 相反颜色计算器 HTML网页源码链接提取工具 颜色选择器 拼音转汉字 图片格式转换 亲戚称呼计算器 在线视频降噪工具-专业去除视频杂音,提升视频质量 DWGDXF互转工具 猫猫年龄计算器 中文繁简体转换 化学元素周期表 太乙金光神咒 时间差计算器 24点计算器 JSON转TypeScript类型 gif裁剪-简单高效的GIF裁剪工具 名人名言 捏泡泡小游戏 文本内关键词批量替换 一键抠图-简单高效的在线图片抠图工具 hex转字符串 在线PDF水印去除工具 中国省份简称及省会大全 木材密度计算器 (BMI)标准身高体重计算 布氏硬度计算器 中国历史朝代查询表 htpasswd在线生成 图片旋转 PDF文件提取图片 视频转文字工具-高效精准的视频字幕提取工具 在线文档批量重命名工具 FTP登录工具 在线图片液化变形工具 预产期计算器 javascript工具 生辰八字转换 头像挂件生成器 websocket测试工具 在线OFFICE文档浏览 mermaid编辑器 新能源汽车充电所需金额计算器 CSS圆角效果生成 人民币转大写 PDF文件删除图片 UUID生成工具 在线音频音调 升降工具 php工具 在线XML解析工具 二手房屋税费计算器 壁纸用量计算器 贷款年利率月利率日利率计算器 人工转换工具 Hello World CMYK颜色对照表 纸张标准尺寸列表 在线CSV转JSON工具 IP地址查询 图片文字识别 中文简体繁体转换 在线魔方游戏 车贷计算器 对联大全-精选经典对联及创作工具 PDF加水印工具-简单高效的在线PDF水印添加工具 在线图片镜像翻转工具 胎儿体重计算器 cidr计算器 sql工具 未找到标题 PDF文件页面自定义排序 重量在线换算 在线图片黑白化工具 JWT在线解密 Java代码格式化