How to make a moving gradient border on a GUI

Mhm! I’ll be sure to update that.

1 Like

This is super sick! Definitely once i get back to not doing commissions I’ll fiddle around doing these kinds of things.

1 Like

Don’t forget to use deltaTime!
e.g.

local speed = 1 -- Revolutions per Second

game:GetService("RunService").Heartbeat:Connect(function(deltaTime)
	script.Parent.UIGradient.Rotation += (speed*deltaTime*360)
end)
5 Likes

Correct me if I’m wrong but that code seems to be creating a new tween every heartbeat. There’s a good chance that can cause a memory leak. It seems a little unnecessary when you can use TweenService’s built in method of looping the tween to achieve a very similar effect. :tongue:

local currentrot = script.Parent.UIGradient.Rotation
local TweenService = game:GetService("TweenService")
local TweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quint,
  									Enum.EasingDirection.In,-1,true)

local Goal = {Rotation = currentrot + 360}

local Tween = TweenService:Create(script.Parent.UIGradient, TweenInfo, Goal)
Tween:Play()
5 Likes

Oh yeah, I’ll be updating that code in a bit. Thanks!

2 Likes

Nice contribution, but there’s something I need to remind of, you didn’t do the border properly.

Here’s a tutorial teaching you the correct way to create a consistent border for UI that has rounded corners.

6 Likes

Great tutorial! I would recommend to also explain the script, since most people that need this tutorial are most of the time beginners and would also like to know how the script works, that way they get a better understanding of Lua.

1 Like

Really detailed, Ill see if I can do it myself

2 Likes

This looks somewhat like the 8th Annual Bloxy Awards countdown.

2 Likes

Mhm! I was trying to do the same type of border but in Roblox. :slight_smile:

1 Like

To add onto this, Roblox does do a similar thing if you look at the page via the inspect tool

Great and unique tutorial! Will bookmark :grinning_face_with_smiling_eyes:

1 Like

By the way, congrats on your cake day! :cake:

2 Likes

does the code work with any gradient?

2 Likes

Yes it does! If you need assistance adding it, feel free to respond to this post! :slight_smile:

1 Like

is there a way to do this with letters?

1 Like

I think so, not 100% sure. You can just insert a UIGradient and the script in it, not too sure if it will work.

1 Like

nice job, I will b sure to use somthing like this in the future

1 Like

This is so clean! Keep up the good work. :+1:

1 Like

Couldn’t you just use a UIStroke with a gradient inserted and do the same thing?

2 Likes

Yes, however, I’m pretty sure that’s a beta thing, so I did it without the Beta if anyone doesn’t want to enable it.

1 Like