App 图标蒙版适配
设计师小周接到任务：为某社交 App 制作 12 个不同形状的圆角头像蒙版——从标准圆角到超椭圆、水滴形。以往他要在 Sketch 里手动切出每个形状再导成 PNG，每改一次圆角半径就得重做。现在他直接在 CSS Mask 生成器里调整渐变参数和路径坐标，实时预览蒙版效果，复制代码即可嵌入 CSS，省去反复导出切图的时间。
蒙 版 层Mask Layers · 多层 composite · 点标题展开
合 成mask-composite（多层叠加方式）
叠加 composite
对 象Preview Target
色块底 fill
上传预览图 your image
点击或拖入图片JPG / PNG / WEBP · 仅本地预览
预 设Gallery · 渐隐 / 暗角 / 网点 / 形状 / 文字镂空
兼容：Safari / iOS 需
-webkit-mask-* 前缀；mask-composite 取值在
标准（add/subtract/intersect/exclude）与 -webkit（source-over/source-out/source-in/xor）下不同，输出已自动双写。就绪 · 多层蒙版实时合成 · 全程浏览器本地处理
第一节
关于本工具
About设计师在 Figma 里拖一个蒙版图层，导出到网页上却发现边缘锯齿、渐变断层。这个工具直接生成 CSS mask 代码，用纯 CSS 语法定义图形、渐变或形状遮罩，不依赖图片资源。输入宽高与渐变参数，实时预览遮罩效果，代码即改即得。所有计算在浏览器本地完成，图片和样式数据不会离开设备。
使用场景
渐变遮罩实现视差
前端工程师小林想给产品落地页的轮播图加上视差滚动效果——图片在文字下方缓慢移动，但文字区域不能遮挡图片。他需要一张从上到下、从透明到半透明的渐变蒙版，让图片在文字区自然淡出。使用本工具，他输入渐变色标位置和透明度值，生成代码后直接粘贴到 CSS 的 mask-image 属性，无需手写复杂的渐变语法。
不规则按钮裁剪
电商运营小陈要做一个「满减券」领取按钮，设计稿要求按钮为六边形，且点击区域必须与视觉形状一致。如果用 clip-path 裁剪，按钮的阴影和悬停效果会丢失。她改用 CSS Mask 生成器绘制六边形路径，生成遮罩代码后应用到按钮上，保留所有 CSS 交互效果，同时确保点击区域精确贴合六边形边界。
毛玻璃卡片边缘柔化
UI 设计师阿杰在做一个毛玻璃（backdrop-filter）卡片组件，发现卡片边缘与背景之间出现生硬的锯齿，尤其在深色背景上特别明显。他需要一张边缘羽化的径向渐变蒙版，让卡片四周自然融入背景。在生成器中设置径向渐变中心点位置和羽化半径，预览满意后复制代码，卡片边缘瞬间变得柔和自然。
视频封面文字遮罩
视频剪辑师小吴需要给一段产品宣传视频的封面加上渐变遮罩，让白色标题文字在亮色背景上清晰可读。他尝试在 Premiere 里添加渐变蒙版，但导出后文字边缘仍有杂色。改用本工具生成一个从底部黑色到顶部透明的线性渐变遮罩，导出 SVG 格式后直接叠加在视频封面上，文字清晰度明显提升。
第二节
使用指南
Getting Started使用步骤
- 1在「图形」面板选基础蒙版形状（圆形/星形/多边形），画布上实时显示蒙版预览
- 2拖拽「羽化」滑块调整边缘过渡，蒙版边界随滑块移动即时变模糊或锐利
- 3点「渐变」标签切换为渐变蒙版，拖动色标停靠点改变渐变方向与颜色分布
- 4在「输出」区点击「复制 CSS」按钮，代码自动写入剪贴板，可直接粘贴到样式表
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 圆形蒙版：radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 50%) | /* 生成一个半径为元素宽度50%的硬边缘圆形遮罩 */ -webkit-mask-image: radial-gradient(circle, black 50%, transparent 50%); mask-image: radial-gradient(circle, black 50%, transparent 50%); | 常规：最常用的圆形渐变蒙版，50%位置硬切，验证渐变语法和百分比单位的正确解析 |
| 线性渐变蒙版：linear-gradient(to right, black 0%, black 30%, transparent 70%, transparent 100%) | /* 从左到右渐变过渡遮罩，中间30%-70%为平滑过渡区 */ -webkit-mask-image: linear-gradient(to right, black 0%, black 30%, transparent 70%, transparent 100%); mask-image: linear-gradient(to right, black 0%, black 30%, transparent 70%, transparent 100%); | 常规：多色阶线性渐变，验证渐变方向、多色标和透明色阶的完整支持 |
| 纯色矩形蒙版：url(#rectMask) —— 内联 SVG 定义 <mask id='rectMask'><rect width='100' height='100' fill='white'/></mask> | /* 提示：检测到 SVG 引用，请确保 SVG 中 mask 元素 id 匹配，且 fill 使用 white（显示）或 black（隐藏） */ -webkit-mask-image: url(#rectMask); mask-image: url(#rectMask); | 边界：SVG 引用方式，工具只输出 CSS 引用语法，不解析 SVG 内容；用户需自行保证 SVG 定义正确，且 fill 颜色决定显示/隐藏 |
| 透明通道蒙版：linear-gradient(45deg, black 0%, black 50%, transparent 50%, transparent 100%) | /* 45度斜角硬边缘半透明遮罩 */ -webkit-mask-image: linear-gradient(45deg, black 0%, black 50%, transparent 50%, transparent 100%); mask-image: linear-gradient(45deg, black 0%, black 50%, transparent 50%, transparent 100%); | 边界：45度角渐变，验证角度单位支持；硬边缘切分验证50%位置是否精确对齐 |
| 重复径向渐变：repeating-radial-gradient(circle, black 0%, black 10%, transparent 10%, transparent 20%) | /* 同心圆环重复图案遮罩 */ -webkit-mask-image: repeating-radial-gradient(circle, black 0%, black 10%, transparent 10%, transparent 20%); mask-image: repeating-radial-gradient(circle, black 0%, black 10%, transparent 10%, transparent 20%); | 易错：repeating- 前缀的渐变，部分旧浏览器不支持；需注意色标百分比必须构成完整周期，否则会出现断裂 |
| 不合法语法：mask: circular(50%) | /* 错误：无法识别 'circular'，标准 CSS 中径向渐变应使用 radial-gradient(circle, ...) */ 请检查输入语法，推荐格式：radial-gradient(circle, black 50%, transparent 50%) | 易错：用户容易混淆 circular 和 radial-gradient 的正确写法，工具需给出明确错误提示和正确示例 |
| 纯白色蒙版：white | /* 纯白色蒙版：元素完全显示（无遮罩效果） */ -webkit-mask-image: white; mask-image: white; | 边界：纯色值作为 mask-image 是合法 CSS，但 white 表示全显示，black 表示全隐藏；用户可能误以为白色是透明 |
常见错误对照
1.mask-image 路径写成了相对路径但 CSS 文件不在同一目录
✗ 错误
mask-image: url('mask.png');✓ 修复
mask-image: url('/images/mask.png'); 或绝对路径 url('https://example.com/mask.png')CSS 中 url() 是相对于 CSS 文件位置解析，不是 HTML 文件。若 CSS 在 /css/ 下，相对路径 '../images/mask.png' 才正确。
2.渐变蒙版忘记加逗号分隔多个渐变层
✗ 错误
mask-image: linear-gradient(black white) radial-gradient(circle red transparent);✓ 修复
mask-image: linear-gradient(black, white), radial-gradient(circle, red, transparent);CSS 渐变函数参数内逗号分隔颜色/位置，多个渐变层之间也要用逗号分隔。缺失逗号会导致整个声明被忽略。
3.蒙版尺寸写成了百分比但父容器没有明确尺寸
✗ 错误
mask-size: 50% 50%;✓ 修复
mask-size: 200px 200px; 或给父容器设置 width/height百分比 mask-size 相对于蒙版所在元素的宽高计算。若元素本身尺寸由内容撑开（如未设宽高的 div），百分比会退化为 auto，导致蒙版不显示。
4.使用 SVG 蒙版时 mask-type 与 mask-mode 混淆
✗ 错误
mask: url(#myMask); /* SVG 内 mask-type='luminance' 但预期 alpha */✓ 修复
mask-mode: alpha; mask: url(#myMask);SVG 的 mask-type 属性控制蒙版计算方式（luminance/alpha），CSS 的 mask-mode 可覆盖它。不声明时默认 luminance，若 SVG 蒙版是 alpha 通道图则需显式设置 mask-mode: alpha。
5.蒙版图片本身有透明度但未考虑合成模式
✗ 错误
mask-image: url('semi-transparent.png'); /* 半透明 PNG 直接当蒙版 */✓ 修复
mask-image: url('semi-transparent.png'); mask-mode: alpha;默认 mask-mode 为 match-source，对 PNG 图片会使用其 alpha 通道。若图片本身是半透明但 alpha 通道全白，实际效果可能全透。明确指定 mask-mode: alpha 可避免歧义。
6.多蒙版层未设置 mask-composite 导致叠加效果不符合预期
✗ 错误
mask-image: url(a.png), url(b.png); /* 默认叠加为 union */✓ 修复
mask-image: url(a.png), url(b.png); mask-composite: intersect;CSS 蒙版支持多层，默认合成操作为 union（并集）。若想取交集、排除等效果必须显式设置 mask-composite 属性。
7.蒙版作用在行内元素上但未设置 display 为 block
✗ 错误
<span style="mask-image: url(mask.png);">文本</span>✓ 修复
<span style="display: inline-block; mask-image: url(mask.png);">文本</span>mask 属性只在块级元素或 inline-block 元素上生效。纯行内元素（如 span 默认 display: inline）会忽略蒙版效果。
第三节
工作原理
How It Works核心公式
mask-image: linear-gradient(angle, color-stop1, color-stop2, ...)
变量说明
angle渐变方向角度，单位 degcolor-stop色标位置与透明度，如 rgba(0,0,0,1)
示例
生成一个从左上到右下的半透明蒙版：mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)。角度 135deg 对应右下方向，起点完全不透明（蒙版全显），终点完全透明（蒙版隐藏），中间区域渐变过渡。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我想给一张图片做那种边缘渐隐的效果，这个工具能做吗？＋
答
可以。CSS Mask 的本质就是通过一张灰度图（或渐变/形状）控制元素的透明度。要做边缘渐隐，直接在蒙版区域选择「径向渐变」或「线性渐变」，把渐变终点设成透明（rgba(0,0,0,0)），起点设成不透明（rgba(0,0,0,1)）。预览区会实时显示效果，调好渐变位置和角度就行，不需要额外切图。
问为什么我生成的蒙版在 Chrome 和 Safari 里显示不一样？＋
答
不同浏览器对 mask 属性的支持有细微差异，尤其是 SVG 路径和渐变语法。Chrome 和 Firefox 对标准的支持比较一致，Safari 对某些 mask-image 的渐变写法可能需要加 -webkit- 前缀。本工具生成的代码会同时输出标准版和带 -webkit- 前缀的版本，直接复制即可。如果 Safari 仍异常，检查是否用了 mask-composite 属性，Safari 目前不支持。
问能用这个工具把图片裁成五角星形状吗？＋
答
可以。选择「形状」模式，本工具内置了五角星、圆形、三角形、六边形等常见 SVG 路径。选中五角星后，预览区会直接显示裁切效果。如果你需要自定义顶点数或圆角弧度，目前版本不支持手动编辑路径，但可以复制生成的 SVG 路径代码到编辑器里微调再贴回来。
问我做了个复杂的渐变蒙版，复制代码到项目里不生效是怎么回事？＋
答
常见原因有三个：一是没有给目标元素设置宽高（mask 依赖元素自身尺寸）；二是蒙版图片路径或渐变写成了相对路径，但项目构建后路径变了；三是 mask-size 默认是 auto，如果蒙版尺寸和元素不匹配，显示会偏移。建议在 CSS 里显式写上 mask-size: cover 或 mask-size: 100% 100%，另外检查元素是否设置了 overflow: hidden 影响可见区域。
问这个工具生成的蒙版代码可以直接用在微信小程序里吗？＋
答
微信小程序不支持标准的 CSS mask 属性，只能使用 background 模拟部分效果。本工具生成的代码是标准 Web 语法，不能直接用于小程序。如果一定要用，可以把蒙版效果导出为 PNG 图片（灰度图），在小程序里用 background-image 或 image 组件叠加实现。建议先在本工具调好效果，截图或导出为图片资源。
问为什么我用线性渐变做蒙版，渐变边界特别生硬？＋
答
生硬是因为渐变过渡范围太小。比如从 black 直接到 transparent 只用了 10% 的渐变长度，边界就会像一刀切。解决方案：把渐变色标之间的距离拉大，比如 black 0% → transparent 100%，或者用多个色标做平滑过渡。本工具的渐变编辑器支持拖动色标位置，把中间色标调到 30%-70% 区间，过渡会自然很多。
问这个工具要上传图片到服务器吗？隐私安全吗？＋
答
本工具是纯前端实现（FE），所有图片、颜色、形状数据都在浏览器本地计算，不会上传到任何服务器。即使你上传了图片用作蒙版底图，也只是在浏览器内存里处理，刷新页面即清除。可以断网使用，完全离线运行。唯一需要网络的是首次加载页面资源。
问蒙版里用 SVG 路径，我怎么知道这个路径画出来是什么形状？＋
答
本工具内置的 SVG 形状都配有预览缩略图，选择后预览区会立即显示实际效果。如果你使用自定义 SVG 路径（粘贴模式），工具会尝试解析并渲染，但不会校验路径语法是否正确。建议先在 SVG 编辑器里验证路径，再粘贴进来。常见错误：路径缺少闭合指令 Z、坐标超出 viewBox 范围。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。