Block gradient without SurfaceUI

I’m trying to make a border, like this image


like this and I tried using surface gui but it didn’t really look like the one in the image. I tried adjusting the transparency but there was still a little white line that could be seen but the one in the picture doesnt.

So my question is, is there a way to make a gradient block without a surface ui and if so how.

You could use Beams and have the beam’s transparency move from 0 to 1, that looks like what this game is using.

1 Like

Can you explain how I can do that? I’m new to VFX so I’m not sure how to do it

Sure! Create a part the size of the border you want. Add two Attachments to it, one at the bottom of the part, one at the top. Name them something to distinguish them (I go for Bot & Top).
Add a Beam to the part. Set the beam’s properties Attachment0 and Attachment1 to the Bot & Top attachments, respectively. Now the beam begins at Attachment0 (Bot) and ends at Attachment1 (Top).

Without changing any settings, now a white bar is connecting the two points. If it’s not visible, you’ll need to tweak the Orientation of each Attachment in the part by rotating it. Alternatively, you can set the Beam’s FaceCamera property to True, but that won’t be the same effect as your screenshot.

Now, to make it fade away, open the Transparency's number sequence by clicking transparency’s value, then clicking the “…” button on the right. You’ll see a line drawn between two points on a graph. Click the right point and drag it upward to increase transparency, and downward to decrease. I would set the right point to the very top and leave the left point half-way. Press Close on the graph’s window to save your changes.

Now, the only remaining thing to achieve the screenshots’ effect is to make the beam as wide as the part is. For my example I used a 12-stud wide part, so I will set the beam’s properties Width0 (how wide the beam is with respect to Attachment0) and Width1 (same, at Attachment1) to 12.

3 Likes

This worked very well but is there a way I can prevent it from turning while I move my camera?

Sounds like the FaceCamera property is set to True. Set it to false and it will stay in-place based on how your Attachments are angled.

1 Like

Ohhhhh thank you I didn’t know that I had to turn the attachments.