🌓
CSS 遮罩生成器
用 mask-image 渐变实现淡出边缘、图标着色等遮罩效果，实时预览并复制。
本地处理 · 不上传
加载工具中…
相关：mask · 遮罩 · 淡出 · mask-image · css
CSS 遮罩生成器用 mask 属性把图片或元素按指定形状裁剪、按渐变淡出，实时预览并输出代码。做边缘淡出与异形裁剪的利器。
使用步骤
- 选择遮罩类型与形状
- 调整位置与渐变范围
- 预览遮罩效果
- 复制生成的 CSS
使用场景
- 让图片边缘柔和淡出
- 实现文字被滚动区域渐隐
- 用图形裁剪出异形图片
- 制作图标的单色着色
小贴士
- 遮罩按透明度工作：遮罩图的不透明处显示原内容，透明处隐藏，半透明处按比例混合。
- 用线性渐变作遮罩可以做出滚动区域上下边缘的柔和淡出，比盖一层渐变遮罩层更干净，因为它真的透出了背景。
- SVG 图标用遮罩配合背景色可以自由换色，比给每种颜色准备一份图标文件省事得多。
常见问题
和 clip-path 有什么区别？
clip-path 是硬边界裁剪，边缘要么在要么不在；mask 支持半透明，能做渐变淡出这类柔和效果。要清晰几何形状用 clip-path，要柔和过渡用 mask。
怎么做边缘淡出？
用 `mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent)`。这样内容上下边缘会真正淡出，露出背后的背景。
需要浏览器前缀吗？
部分浏览器仍需要 `-webkit-mask` 前缀。稳妥做法是前缀版本与标准版本都写，标准写法放在后面。
CSS 遮罩生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 遮罩生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。