CSS遮罩生成器

什么是 mask-image

mask-image 是 CSS 的一个属性，用于给元素应用遮罩效果。可以把遮罩理解为一张透明度地图：透明区域隐藏元素，半透明区域部分显示，不透明区域完整显示。

它很适合做渐变淡出、边缘柔化和过渡显隐等视觉效果，常用于需要平滑透明变化的 UI 和动效场景。

使用说明

1. 选择遮罩类型（线性、径向或锥形渐变）。
2. 根据类型调整角度或位置参数。
3. 设置不透明与透明停止点并观察实时预览。
4. 复制生成的 CSS 代码并粘贴到项目中使用。

核心功能

• 支持线性、径向、锥形三种渐变遮罩。
• 可调节角度、位置和透明度停止点。
• 参数修改后实时预览，便于快速迭代。
• 一键复制 CSS，自动包含 -webkit 前缀以兼容 Safari。
• 本地运行，不上传数据。

常见问题

mask-image 和 clip-path 有什么区别

mask-image 支持半透明和渐变过渡，适合柔和显隐；clip-path 是硬裁切，只能显示或隐藏，适合精确几何形状。

浏览器兼容性如何

现代浏览器对 mask-image 支持较好，Safari 等环境通常需要 -webkit-mask-image 前缀，IE 不支持该属性，建议准备降级方案。

可以使用图片作为遮罩吗

可以，示例：mask-image: url(mask.png);。不透明像素显示，透明像素隐藏，建议使用带透明通道的 PNG。