CSS Mask 遮罩生成器

设置遮罩图像(如 linear-gradient()、url())及尺寸、位置与重复方式,工具会生成包含 -webkit-mask-image 前缀的完整遮罩 CSS 代码。全部在浏览器本地完成。

遮罩设置 等待输入

遮罩图像中黑色区域显示、透明区域隐藏。

计算结果
属性数—
尺寸—
设置参数后点击生成,CSS 代码将显示在这里。

生成的代码包含 -webkit 前缀;结果仅供参考。

计算说明
  • mask-image 用图像定义元素的可见区域。
  • 遮罩中黑色(不透明)区域显示,透明区域隐藏。
  • 常用 linear-gradient() 做渐隐、淡出效果。
  • 为兼容性需同时输出 -webkit-mask-image。
  • mask-size、mask-position 控制遮罩的摆放。