We have support for CSS masks now. These allow you to adjust the transparency of a panel independently from its contents.
You can use these to give UIs some nice polish - here's a quick example showing how you can fade a section to show that it's scrollable:
Other use cases include pie menus, scroll indicators, loading wheels, etc.
We support the main mask properties:
mask-image: url( /ui/tests/background.png ); mask-mode: alpha; mask-size: 256px; mask-position: center; mask-repeat: no-repeat;
Or, if you prefer, you can use the "mask" shorthand:
mask: linear-gradient( to top, white, black ) center bottom / 100% 100px;
We also have our own custom "mask-scope" property. This lets you apply the mask to a specific set of filters, which can be useful if you only want to blur a certain area.
mask-image: url( /ui/tests/alpha-inv.png ); mask-mode: alpha; mask-scope: filter; mask-size: cover; filter-blur: 10px; filter-brightness: 0.25;