Need help understanding UI gradient

TLDR: I need a better explination of UI gradient than is on the docs

Currently, I am trying to have a UI gradient act as a transparency mask for some sections of my UI. However, I can’t seem to understand how they actually work and it seems to have inconsistent results.

Bellow is an image of a square with the UI gradient I want to use. The UI gradient has an offset of (0.5,0.5) which I think is the middle of the image and it has a transparency number sequence of 0 being 0 transparency and 0.001 being 1 transparency all the way to 1.

Number sequence for transparency

Images of square with rotation values of 0 and 90


Now both of these images make sense, the point is in the middle, and the area its facing in front is transparent.

Red is the reference point and rotation, blue is area it should be affecting

However, when I use a rotation value above 90, for example 120, it does not work like I expect it too.
Actual result
Expected result (Estimate)

If anyone has any ideas on why this is happening, or just a have a clearer explanation of the properties of UI gradient than on the docs, it would be greatly appreciated.

Thank you