UUUP Tools

设计配色

毛玻璃效果生成 - backdrop-filter 工具

可视化调节模糊、透明度、背景色与边框透明度，生成带 webkit 前缀的毛玻璃 CSS，适合卡片、导航栏与模态层样式。

快速切换→CSS 阴影生成
CSS毛玻璃backdrop-filter
快速切换:CSS 阴影生成CSS 渐变生成CSS 毛玻璃生成

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色 浏览全部工具

你可以复制当前工具页链接，或在支持的设备上调用系统分享。

设计配色

毛玻璃效果生成

Glassmorphism

毛玻璃效果预览

12px
0.15
0.20

CSS 已生成。

使用场景

  • 给卡片或面板加半透明模糊背景
  • 调试导航栏毛玻璃层级
  • 导出可粘贴的 backdrop-filter 代码

如何使用

  1. 调整模糊度、透明度、背景色与边框透明度
  2. 在预览区查看效果
  3. 复制或导出生成的 CSS

示例输入输出

参数

模糊 12px，透明度 0.15，背景 #ffffff

CSS

backdrop-filter: blur(12px); background: rgba(255,255,255,0.15);

FAQ

兼容性如何？

需要浏览器支持 backdrop-filter。工具会同时输出标准写法与 -webkit-backdrop-filter。

和 css-glassmorphism 有什么区别？

本工具聚焦背景模糊、透明度与边框等常用参数的快速生成；另一工具可作相关样式补充参考。

工具列表

相关推荐

你可以从这里继续打开相近场景的工具，减少重复搜索。

CSS 阴影生成

CSS 阴影生成 - box-shadow 可视化工具

可用

可视化调节偏移、模糊、扩散、颜色、透明度和内阴影，实时预览并生成 box-shadow CSS，适合卡片、按钮和浮层阴影调试。

CSS 阴影 box-shadow
打开工具

CSS 渐变生成

CSS 渐变生成 - 线性径向锥形工具

可用

可视化生成线性、径向与锥形 CSS 渐变，可调节角度、色标位置并添加多个色标，适合背景、按钮和品牌色过渡设计。

CSS 渐变 背景
打开工具

CSS 毛玻璃生成

CSS 毛玻璃生成 - 卡片模糊样式工具

可用

调节颜色、透明度、模糊与描边参数，预览并生成毛玻璃卡片 CSS，适合调试 backdrop-filter、半透明面板与导航层视觉，浏览器本地完成。

CSS 毛玻璃 backdrop-filter
打开工具