Question Is it possible to fade an element to full transparency?

I'd like to fade the bottom part of an element to full transparency like this:

I used mask-image with linear-gradient to achieve this effect in browser, but mask-image is not currently implemented. Is there any workaround for this?

I tried manually setting the vertex tint, but it only affected the background rather than the content itself. It was basically the same as setting background-color: rgba(255, 255, 255, 0.5) which is not what I want.

Any solution to this?

 

There's an opacity property in the display group. Use that.

 

In case you didn't read the first paragraph let me repeat: I would like to fade a specific part of the element, not the element itself.
AFAIK there is no way of doing that either per vertex or by using a mask.

 

Maybe a custom shader with a mask texture to know where to fade?

 

It is a possibility, but would be difficult to implement. I'd have to render both the background and the element I'd like to fade to a texture. Unfortunately, there is no way to inject commands during the uitk rendering process, meaning I'd have to separate the bg and the element to separate panelsettings. Very clunky solution.