CSS遮罩生成器
在线CSS遮罩生成器，支持 mask-image 线性/径向/锥形渐变可视化调节、实时预览与代码复制，适用于淡出遮罩、视觉过渡与动效调试场景。
遮罩设置
不透明
透明
CSS 代码
mask-image: linear-gradient(180deg, black 50%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, black 50%, transparent 100%);预览
遮罩预览
预览区域使用 mask-image 应用遮罩效果。
工具说明
什么是 mask-image？
mask-image 是 CSS 的一个属性，用于为元素应用遮罩效果。遮罩是一张“透明度地图”：完全透明的区域会使元素完全透明，半透明区域会部分可见，不透明区域则完全可见。
与图像编辑软件的图层蒙版类似，mask-image 可以实现渐变淡出、边缘柔化、复杂过渡等艺术化效果，特别适合需要平滑透明变化的 UI 与动效场景。
如何使用本工具
- 选择遮罩类型（线性、径向或锥形渐变）。
- 根据类型调整角度或位置等参数。
- 设置不透明与透明的停止点，观察实时预览效果。
- 复制生成的 CSS 代码并粘贴到项目中使用。
核心功能特性
- 支持线性、径向、锥形三种渐变遮罩。
- 可调节角度、位置与透明度停止点。
- 实时预览遮罩效果，参数变化即时反馈。
- 一键复制 CSS 代码，自动包含 -webkit 前缀以兼容 Safari。
- 本地运行生成，不上传数据。
常见问题 (FAQ)
mask-image 和 clip-path 有什么区别？
mask-image 使用图像或渐变创建透明度过渡，可实现半透明与柔和渐变；clip-path 使用路径裁剪元素，只能做到显示/隐藏的硬切换，更适合精确形状裁剪。
浏览器兼容性如何？
现代浏览器对 mask-image 支持较好，但 Safari 等环境通常需要 -webkit-mask-image 前缀；IE 不支持该属性，建议提供降级方案。
如何使用图片作为遮罩？
可以使用 url() 引用图片：mask-image: url(mask.png); 遮罩图片中不透明部分可见、透明部分隐藏，半透明区域会产生对应的过渡效果，建议使用带透明通道的 PNG。