Support CSS Mask Image?

[JeroenReumkens]

Feature Request

Description

Is there any way we could support CSS Mask Image? This can be used to create fade out gradients for eg long texts. I think it would be really useful, especially when your background isn't a solid color, so you can not put a filled gradient on top of this.

Thanks for the amazing work on Satori by the way, really loving it so far!

[shuding]

Sounds like something that can be supported technically in SVG. Adding the "enhancement" label to track.

[liho00]

+1

[ppjjzz]

+1

[shuding]

Adding some notes, that mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent); might be the easiest to support via <mask>. For things like mask-image: image(url(mask.png), skyblue); and mask-image: url(masks.svg#mask1); we might need to think about ways to load resources there, similar to background-image: url(...).

[Jackie1210]

Interesting！I'd like to work on it.🥳

[ppjjzz]

+1