Mask with shade

[Fenopiù]

Good evening everyone!

I'm using Typescript and Phaser 2.6.2.

I've a box where sprites are rendered, outside this box they aren't.

To do this I've applied e mask (drawRect).

Now I've to give to the top and the bottom of this box a little shade, so the sprites that enter from the top of the box starts to be rendered in the box with alpha 0 to alpha 1 and the sprites that leaves the box from the bottom are going to alpha 1 to alpha 0 and then they will be no more rendered outside the box.

How can I reach this?

The only solution I've found is to put a sprite or a bitmap data on... but is not a mask and it doesn't work as I desire... :-(