Use UI gradient's to give objects a fading-out effect

  1. What do you want to achieve? I’m aiming to adjust the transparency of parts when they cross a threshold. This simulates the effect of the part fading out instead of a harsh transparency adjust of the entire part

  2. What is the issue? I can’t quite understand the calculations I need.

  3. What solutions have you tried so far?
    Searching through the forums as well as discord communities.

The goal is to adjust the transparency sequence and rotation of the UI Gradients to face the direction of a specific point regardless of its parent’s orientation.


The yellow lines are thresholds used to clarify when to adjust transparency. Crossing the yellow line on the right starts the transparency change. The outer line is the point it becomes fully transparent.


The red shows the areas that would be Transparent (After crossing the threshold), the green would be Opaque, and the green dot is the reference point, where the gradients will face (e.g the center of the thresholds).

Maybe split the part into many parts using NegateAsync() and from there make the parts different transparencys. Also, maybe look into using viewport Frame

Nah I wouldn’t sacrifice performance by adding a bunch of parts that aren’t necessary. I know the math is possible so that’s the direction I prefer taking here, I just need help on what calculations to use