CSS毛玻璃效果生成器
根据颜色、不透明度、模糊和圆角，生成"毛玻璃" CSS代码块——半透明rgba()背景、backdrop-filter模糊（包含-webkit-前缀）、柔和白色边框和微妙的阴影。
输入
与背景颜色结合成rgba()值。
用于backdrop-filter及其-webkit-前缀版本。
面板1px白色边框的不透明度。
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-glassmorphism-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"backgroundColor": "#ffffff",
"backgroundOpacity": "20",
"blurAmount": "10",
"borderRadius": "16",
"borderOpacity": "30"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-glassmorphism-generator` tool (CSS Glassmorphism Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-glassmorphism-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS毛玻璃效果生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
功能介绍
CSS毛玻璃效果生成器可以将颜色选择器和四个滑块转换为随时可粘贴的"毛玻璃"CSS代码块。毛玻璃是一种流行的UI设计趋势 — 最初由macOS的毛玻璃面板普及，后来被Windows Fluent Design和无数仪表板/卡片UI采用 — 其中半透明面板位于色彩缤纷或繁忙的背景上方，模糊程度恰好足以提示背后的内容，同时保持可读性。这种外观源于几个CSS属性的堆叠：半透明的rgba()背景、backdrop-filter模糊、柔和的光线边框、圆角半径和微妙的投影以创造浮升感。
生成的属性
background: rgba(r, g, b, a);
backdrop-filter: blur(Npx);
-webkit-backdrop-filter: blur(Npx);
border: 1px solid rgba(255, 255, 255, a2);
border-radius: Npx;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);- background — 您选择的颜色与背景不透明度滑块组合成rgba()值。不透明度越低，面板后面的内容越能显露出来。
- backdrop-filter / -webkit-backdrop-filter — 实际的模糊效果，使效果看起来像"玻璃"。两行始终一起输出；请参见下面的浏览器支持说明。
- border — 固定的1px白色边框，由边框不透明度滑块着色。淡色的明亮边缘是产生"捕捉光线的玻璃面板"效果的关键；而实心边框看起来像一张平面卡片。
- border-radius — Border Radius滑块中的圆角。玻璃面板几乎总是圆角而不是尖角。
- box-shadow — 固定的微妙投影，可以使面板离开页面而不与模糊效果竞争。
浏览器支持说明
backdrop-filter在现代Chrome、Edge和Firefox中得到很好支持，但Safari历来需要-webkit-backdrop-filter前缀才能呈现模糊效果 — 这就是为什么生成的CSS始终包含两个声明。如果您删除-webkit-行，Safari用户可能会看到平面的半透明面板而不是毛玻璃效果。另请注意：backdrop-filter会模糊元素后面的任何内容，因此除非元素分层在具有纹理或颜色的内容上，否则效果是不可见的 — 纯白的页面背景将不会显示它。
如何使用
- 选择背景颜色并设置背景不透明度 — 这两者一起成为面板的半透明rgba()填充。
- 拖动**模糊（px）**来控制玻璃外观的毛玻璃程度；较高的值会更强烈地模糊面板后面的背景。
- 设置Border Radius确定面板角的圆角程度。
- 调整边框不透明度使面板的淡白色边缘更加或更加不明显。
- 复制生成的CSS代码块并将其应用于位于图像、渐变或其他元素之上的任何定位元素。
常见问题
为什么边框总是白色的？
淡白色的半透明边框是毛玻璃的通用约定 — 它模仿真实玻璃如何在其边缘捕捉光线，与面板本身的色调无关。如果需要不同颜色的边框，请将输出中的rgba(255, 255, 255, …)替换为您自己的颜色。
为什么模糊在我的元素上不显示？ backdrop-filter仅模糊已在元素后面呈现的内容 — 它需要后面有详细内容（图像、渐变或其他UI），并且元素本身需要透明或半透明背景才能显露该内容。完全不透明的背景会完全破坏该效果。
我可以使用暗色背景色获得"深色玻璃"外观吗？
可以 — 选择暗色十六进制颜色（例如#000000）和低到中等的不透明度；边框保持白色以与暗模糊背景形成对比，这是毛玻璃深色模式处理的标准。
此工具是否存储或上传任何内容？ 否。所有计算在您的浏览器中本地运行 — 您的颜色和滑块值从不离开您的设备。