How to make a moving gradient border on a GUI

Hello! In this tutorial, I will be showing you how to create a gradient border that moves on any GUI just like the one below!

  1. Create a background frame where you want the moving border to be like the one below. You may use any UICorners/any UI designing things you want to it. For this tutorial, I will be using a UICorner.
    Step1
  2. Create a UIGradient to how you would like the border to look like (example below).
  3. Create an inner frame, button, or any type of GUI that will be the main GUI under the border and make sure to leave some edges on the side (I used an UICorner and UIGradient in the example below.
    Step3
  4. You’re getting there! Here’s the fun part! Insert a LocalScript under the border frame and insert the following code below! The code below also has comments on how each line works.
local currentrot = script.Parent.UIGradient.Rotation -- Gets the initial rotation of the UIGradient
local TweenService = game:GetService("TweenService") -- Gets the Roblox TweenService to move things smoothly.
local TweenInformation = TweenInfo.new(2, Enum.EasingStyle.Linear,Enum.EasingDirection.In,-1,false) -- This creates the TweenInfo. The parameters are in the following order: TimeToTween, EasingStyle, EasingDirection, RepeatCount (-1 for infinite), and reverses.
local Goal = {Rotation = currentrot + 360} -- This is our goal for the tween. 360 makes the rotation go an entire circle.
local Tween = TweenService:Create(script.Parent.UIGradient, TweenInformation, Goal) -- Creates the tween and the parameters are: UIGradient (object) location, TweenInformation, and Goal.
Tween:Play() -- Plays the Tween

Now, try it out by play-testing! Enjoy! Please give me any feedback or ask me any questions in the replies! Thanks for reading!

If you really like this tutorial, why not go a step further and make your GUI even more advanced? Instead of only shrinking the frame size, follow this tutorial for the perfect border!
*Credits to @nana_kon for telling me about this! :grinning_face_with_smiling_eyes: *

91 Likes

Great resource!

If you want it to rotate smoother, I recommend you use TweenService.

btw happy birthday :laughing:

1 Like

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