Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
CSS遮罩生成器 - mask-image可视化工具
一款免费的在线 CSS mask-image 生成工具。创建渐变遮罩、图片遮罩效果，支持线性、径向、锥形渐变。实时预览遮罩效果，一键复制 CSS 代码，快速实现各种视觉遮罩效果。
遮罩设置
180°
不透明50%
透明100%
预览
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 是 CSS 的一个属性，用于为元素应用遮罩效果。 遮罩是一种图像，其中完全透明的区域会使元素完全透明，半透明的区域会使元素部分透明， 不透明的区域会使元素完全可见。
使用 mask-image 可以创建各种视觉效果，如渐变淡出、边缘柔化、复杂形状裁剪等。 它与 Photoshop 中的图层蒙版概念相似，但完全使用 CSS 实现。 mask-image 特别适用于创建平滑的过渡效果和艺术化的视觉设计。
# 如何使用本工具
- 选择遮罩类型（线性、径向或锥形渐变）
- 调整渐变角度、位置等参数
- 设置透明度渐变的起点和终点
- 实时预览遮罩效果
- 复制 CSS 代码到您的项目中
# 核心功能特性
- 三种渐变: 支持线性、径向、锥形渐变遮罩
- 灵活参数: 可调整角度、位置、透明度等
- 实时预览: 参数修改后立即看到效果
- 浏览器兼容: 自动生成 webkit 前缀代码
- 简单易用: 无需深入了解 CSS 即可创建遮罩
- 本地生成: 所有处理都在浏览器本地完成
# 常见问题 (FAQ)
mask-image 和 clip-path 有什么区别？
mask-image 使用图像或渐变来创建遮罩效果，可以实现半透明和渐变的过渡效果； clip-path 使用路径来裁剪元素，只能实现完全显示或完全隐藏的效果。 mask-image 更适合创建柔和的过渡效果，而 clip-path 更适合创建精确的形状裁剪。
浏览器兼容性如何？
mask-image 在现代浏览器中得到良好支持，但需要添加 -webkit- 前缀以支持 Safari 和旧版 Chrome。 Firefox 和 Edge 较新版本已经支持无前缀的 mask-image。 IE 不支持此属性，需要提供降级方案。
如何使用图片作为遮罩？
可以使用 url() 函数引用图片作为遮罩：mask-image: url(mask.png); 遮罩图片中，不透明的部分会使元素完全可见，透明的部分会使元素完全透明， 半透明的部分会产生相应的半透明效果。建议使用 PNG 格式的图片。