.mask(image: Image): Component
The image used as a mask. White areas show the underlying content, black areas hide it. Gray values produce partial transparency.
Support
Usage
Masking with an image
Image({ url: "photo.jpg" })
.resizable()
.frame({ width: 200, height: 200 })
.mask(
Image({ url: "mask.png" })
.resizable()
)
Gradient fade using a shape mask
Text("Fading text that trails off at the bottom")
.frame({ maxWidth: 200 })
.mask(
LinearGradient({
colors: ["black", "clear"],
startPoint: "top",
endPoint: "bottom"
})
)
Notes
- The mask image’s luminance determines visibility: white (or light) areas show the content, black (or dark) areas hide it.
- On web, this is implemented using CSS mask-image.
See Also
- clipShape — clips content to a geometric shape
- opacity — controls overall transparency
