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类名

分享评分

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

捏泡泡小游戏 中文转换拼音 孙休曹操搭配谁组一队 SVG转Base64 反算贷款期数计算器 仿小米手机相机莱卡水印工具 刘禅曹操搭配谁组一队 通知存款计算器 NTP服务器地址大全 长方体体积计算器 在线图片裁剪裁剪网格辅助工具 渐变色大全 PDF多文件合并 纸张标准尺寸列表 Word转Excel工具-快速、高效的文档转换工具 Photoshop快捷键大全 在线LaTeX公式编辑器 反算贷款金额计算器 下载链接转换 今天吃什么 质数(素数)在线计算生成 古风名字生成器-为您生成典雅优美的古风名字 圆锥体积计算器 油耗计算器 格子达类AI辅写高风险如何降低 在线PDF转Word 网站桌面快捷方式 世界各国首都查询工具 二种颜色混合器 在线OneNote笔记整理工具 PDF加水印工具-简单高效的在线PDF水印添加工具 图片写入EXIF信息 世界各国区号代码及时差 GIF图片比例缩放 在线图片镜像翻转工具 袁绍曹操搭配谁组一队 在线音频音频左右平衡调节工具 正则表达式大全 女性安全期计算 平行四边形面积计算器 功率计算器 文章ai率多少算高 SVG转PNG图片-免费在线转换工具 在线文档内容比对工具 十万个为什么大全 刘表曹操搭配谁组一队 孩子身高预测 Keccak加密 条形码生成 血压计算器 重量在线换算 在线文本去重工具 半球体曲面面积 视频转PPT工具-快速将视频内容转换为专业PPT演示文稿 随机点名工具 六十甲子速查表 在线歇后语 抛硬币 金光神咒 在线Markdown转HTML工具 代码反混淆 GUID生成工具 markdown编辑器 视频转音频工具-快速将视频文件转换为高质量音频 网页Gzip压缩检测 RIPEMD160哈希加密 在线图片卡通化工具 退休时间日期计算器 在线梯形面积计算器 SVG转CSS-在线将SVG转换为CSS背景或数据URL 复印纸缩放比例计算器 模拟蜘蛛UA访问网址 正六边形面积计算器 音频剪辑工具 yaml工具 PDF删除页面工具-简单高效地删除PDF中的页面 半球体总表面积 IP地址查询 文件收集工具 图片拼接-简单高效的图片拼接工具 在线图片添加图形元素工具 各国国旗在线查询 URL编码工具 在线视频倒放工具 在线HEX与字符转换 PDF在线编辑工具-免费在线PDF编辑、转换、合并工具 网页定时刷新 猫猫年龄计算器 PDF文件页面自定义排序 在线图片无损放大工具-免费AI图片放大,清晰不失真 常用电话列表 中文简体繁体转换 ascii table生成 在线图片智能调色工具 在线石墨文档协作管理工具 PDF旋转工具-在线免费旋转PDF页面 在线白板 在线子网掩码计算工具 电子木鱼 时间差计算器