How to make Moving Gradient

[Ashp116]

How to make Moving Gradient

First and for most, you need to know how to use ColorSequence.new() . My script is not smooth, but it works. Sorry about that. When I make a fully modular script, ill update this posrt

How ColorSequence Works

So ColorSequence has 2 parameters. The first parameter is the position of the color (anywhere from 0 - 1). The second parameter is the color, this part is to tell at what color should display.

Moving Gradient

To make a Moving Gradient, what you do is you use a while loop, and change the values for each time it has to move. To make not stress about what I said, I will give you the basic script

1. Insert a ScreenGui
2. Insert a TextLabel under ScreenGui. Make the BackgroundTransparency to 1, TextScaled to true, and TextColor3 to (255,255,255)
3. Insert a UIGradient under TextLabel
4. Insert a LocalScript under TextLabel
5. Insert a NumberValue under LocalScript , and name it speed, this is value is to tell how fast the gradient should move. Play around with this value. (WARNING! - Make sure the spelling is speed )
6. Paste this code in LocalScript

local red 
local orange 
local yellow 
local green 
local blue 
local blue 
local finish 
local rainbow

while wait() do
	local speed = script.speed.Value
     red = ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 4))
     orange = ColorSequenceKeypoint.new(.2, Color3.fromRGB(255, 214, 47))
     yellow = ColorSequenceKeypoint.new(.4, Color3.fromRGB(251, 255, 6))
     green = ColorSequenceKeypoint.new(.5, Color3.fromRGB(28, 255, 26))
     blue = ColorSequenceKeypoint.new(.6, Color3.fromRGB(44, 93, 255))
     purple = ColorSequenceKeypoint.new(.8, Color3.fromRGB(255, 26, 252))
     finish = ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 213))
     rainbow = ColorSequence.new({red, orange, yellow, green, blue, purple, finish})
	script.Parent.UIGradient.Color = rainbow
	wait(speed)
	 red = ColorSequenceKeypoint.new(0.2, Color3.fromRGB(255, 0, 4))
     orange = ColorSequenceKeypoint.new(.4, Color3.fromRGB(255, 214, 47))
     yellow = ColorSequenceKeypoint.new(.5, Color3.fromRGB(251, 255, 6))
     green = ColorSequenceKeypoint.new(.6, Color3.fromRGB(28, 255, 26))
     blue = ColorSequenceKeypoint.new(.8, Color3.fromRGB(44, 93, 255))
     purple = ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 26, 252))
     finish = ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 213))
     rainbow = ColorSequence.new({finish, red, orange, yellow, green, blue, purple})
	script.Parent.UIGradient.Color = rainbow
wait(speed)
	red = ColorSequenceKeypoint.new(0.4, Color3.fromRGB(255, 0, 4))
    orange = ColorSequenceKeypoint.new(.5, Color3.fromRGB(255, 214, 47))
    yellow = ColorSequenceKeypoint.new(.6, Color3.fromRGB(251, 255, 6))
    green = ColorSequenceKeypoint.new(.8, Color3.fromRGB(28, 255, 26))
    blue = ColorSequenceKeypoint.new(1, Color3.fromRGB(44, 93, 255))
    purple = ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 26, 252))
    finish = ColorSequenceKeypoint.new(0.2, Color3.fromRGB(255, 0, 213))
    rainbow = ColorSequence.new({purple, finish, red, orange, yellow, green, blue})
	script.Parent.UIGradient.Color = rainbow
wait(speed)
	red = ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 0, 4))
    orange = ColorSequenceKeypoint.new(.6, Color3.fromRGB(255, 214, 47))
    yellow = ColorSequenceKeypoint.new(.8, Color3.fromRGB(251, 255, 6))
    green = ColorSequenceKeypoint.new(1, Color3.fromRGB(28, 255, 26))
    blue = ColorSequenceKeypoint.new(0, Color3.fromRGB(44, 93, 255))
    purple = ColorSequenceKeypoint.new(0.2, Color3.fromRGB(255, 26, 252))
    finish = ColorSequenceKeypoint.new(0.4, Color3.fromRGB(255, 0, 213))
    rainbow = ColorSequence.new({blue, purple, finish, red, orange, yellow, green})
	script.Parent.UIGradient.Color = rainbow
wait(speed)
	red = ColorSequenceKeypoint.new(0.6, Color3.fromRGB(255, 0, 4))
    orange = ColorSequenceKeypoint.new(.8, Color3.fromRGB(255, 214, 47))
    yellow = ColorSequenceKeypoint.new(1, Color3.fromRGB(251, 255, 6))
    green = ColorSequenceKeypoint.new(0, Color3.fromRGB(28, 255, 26))
    blue = ColorSequenceKeypoint.new(0.2, Color3.fromRGB(44, 93, 255))
    purple = ColorSequenceKeypoint.new(0.4, Color3.fromRGB(255, 26, 252))
    finish = ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 0, 213))
    rainbow = ColorSequence.new({green, blue, purple, finish, red, orange, yellow})
	script.Parent.UIGradient.Color = rainbow
wait(speed)
	red = ColorSequenceKeypoint.new(0.8, Color3.fromRGB(255, 0, 4))
    orange = ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 214, 47))
    yellow = ColorSequenceKeypoint.new(0, Color3.fromRGB(251, 255, 6))
    green = ColorSequenceKeypoint.new(0.2, Color3.fromRGB(28, 255, 26))
    blue = ColorSequenceKeypoint.new(0.4, Color3.fromRGB(44, 93, 255))
    purple = ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 26, 252))
    finish = ColorSequenceKeypoint.new(0.6, Color3.fromRGB(255, 0, 213))
    rainbow = ColorSequence.new({yellow, green, blue, purple, finish, red, orange})
	script.Parent.UIGradient.Color = rainbow
wait(speed)
	red = ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 4))
    orange = ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 214, 47))
    yellow = ColorSequenceKeypoint.new(0.2, Color3.fromRGB(251, 255, 6))
    green = ColorSequenceKeypoint.new(0.4, Color3.fromRGB(28, 255, 26))
    blue = ColorSequenceKeypoint.new(0.5, Color3.fromRGB(44, 93, 255))
    purple = ColorSequenceKeypoint.new(0.6, Color3.fromRGB(255, 26, 252))
    finish = ColorSequenceKeypoint.new(0.8, Color3.fromRGB(255, 0, 213))
    rainbow = ColorSequence.new({orange, yellow, green, blue, purple, finish, red})
	script.Parent.UIGradient.Color = rainbow
wait(speed)
	
	
end

Please reply to this post if you have any questions

[Sqowly (KnivesandPens)]

wow, i’m impressed. but this must’ve take a VERY long time to write for a rainbow gradient flow pattern

[Sqowly (KnivesandPens)]

i think roblox should just add a set feature were you can enable “flow” or moving gradient; if it’s gonna take that much to write

[Ashp116]

No it took a day of full concentration to make it

[TSevik]

Wowozers this looks very cool. Is there any way to reduce the amount of repeated code in the script maybe using tweens or for loops?

[Dummiez]

You can probably do something like this for the same effect with easier configuration (there’s better ways to make it smoother as well).

    local ScreenGui = script.Parent
    local TextLabel = ScreenGui.TextLabel
    local UIGradient = TextLabel.UIGradient

    local GradientColors = {
    	BrickColor.new("Bright red").Color,
    	BrickColor.new("Bright orange").Color,
    	BrickColor.new("Bright yellow").Color,
    	BrickColor.new("Bright green").Color,
    	BrickColor.new("Bright blue").Color,
    	BrickColor.new("Royal purple").Color
    }

    while wait(0.1) do
    	local tVal = GradientColors[1]
    	table.move(GradientColors, 2, #GradientColors, 1)
    	GradientColors[#GradientColors] = tVal

    	local transitColors = {}
    	for seq, color in pairs (GradientColors) do
    		table.insert(transitColors, ColorSequenceKeypoint.new(((seq-1))/(#GradientColors-1), color))
    	end
    	UIGradient.Color = ColorSequence.new(transitColors)
    end

[Ashp116]

The problem with your script is that ColorSequnce one has the position from 0 -1. Your position number are increasing

[Dummiez]

ColorSequences are required to have a time of 0.0 and 1.0 otherwise it won’t run, this one will automatically determine time positions depending on how many colors you assign to the GradientColors list (as long as it’s 2 or more, the amount needed for keypoints).

It works just fine.

[Ashp116]

O wow, i didnt know that. TY

[EmeraldSlash (Rio)]

One smoother option is that you could manually calculate the color of each keypoint every frame, which is complex but probably not a bad solution. Here’s a working implementation (sorry formatting is a little stuffed up mb):

local colors = {
    BrickColor.new("Bright red").Color,
    BrickColor.new("Bright orange").Color,
    BrickColor.new("Bright yellow").Color,
    BrickColor.new("Bright green").Color,
    BrickColor.new("Bright blue").Color,
    BrickColor.new("Royal purple").Color
}

local num_colors = #colors
local color_length = 1 / num_colors
local period = 3 -- how long it takes for full animation

game:GetService("RunService").RenderStepped:Connect(function()
   local progress = (tick() % period) / period -- ranges from 0 to 1 based on progress
   local newColors = {}
	local wrapColor = false -- the color at the edges
	
	for i = 1, num_colors + 1 do -- add 1 for extra edge
	    local color = colors[i] or colors[i-num_colors] -- accounting for +1
        local position = progress + (i-1)/num_colors -- the current color's position

		if position > 1 then position = position - 1 end -- wrap positions
		if position == 0 or position == 1 then wrapColor = true end -- the color is at edge
		
		table.insert(newColors, ColorSequenceKeypoint.new(position, color))
   end

	if not wrapColor then -- if there were no clean matches on the edge
		local indexProgress = ((1 - progress) / color_length) + 1
		local col1 = colors[math.floor(indexProgress)]
		local col2 = colors[math.ceil(indexProgress)] or colors[1]
		local finalCol = col1:Lerp(col2, indexProgress % 1) -- find the color between these two cols
		
		table.insert(newColors, ColorSequenceKeypoint.new(0, finalCol))
		table.insert(newColors, ColorSequenceKeypoint.new(1, finalCol))
	end
	
	table.sort(newColors, function(a, b)
		return a.Time < b.Time
	end)
	
	script.Parent.Frame.UIGradient.Color = ColorSequence.new(newColors)
end)

Alternatively, if you’re tweening a frame background and not text itself, you could treat this like the infinitely scrolling background image problem (example How to make moving background scroll infinitely?). The solution here is to tween both of the gradient frames in one direction, then reset their positions and repeat.

local frame1, frame2
local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear)
local tween1 = game:GetService('TweenService'):Create(frame1, tweenInfo, {Position = UDim2.new(1, 0, 0, 0})
local tween2 = game:GetService('TweenService'):Create(frame2, tweenInfo, {Position = UDim2.new(0, 0, 0, 0})
tween1.Completed:Connect(function()
   tween2:Cancel() -- make sure the other tween isn't running
   frame1.Position = UDim2.new(0, 0, 0, 0)
   frame2.Position = UDim2.new(-1, 0, 0, 0)
   tween1:Play()
   tween2:Play()
end)
frame1.Position = UDim2.new(0, 0, 0, 0)
frame2.Position = UDim2.new(-1, 0, 0, 0)
tween1:Play()
tween2:Play()

In this example, frame1 is the default frame you see at the start of the animation, and frame2 is to the left of it, hidden by the ClipDescendants property. Both tween to the right, and then when the animation is done it resets their positions to the default positions and tweens them to the right again.

[EmeraldSlash (Rio)]

That is not what the OP is asking for it to look like, though. You cannot do that while showing all of the colors at once like the OP wants as there is no way to show a gradient twice within a single gradient in that way. One idea I had was putting the gradient into the ColorSequence twice, but that still won’t work as we can’t scale a gradient’s size (in this case to be double its normal size).

[tralalah]

Just to add on, I proposed a solution that takes up a lot less work with smooth results (and is what I use currently). I talk more about it here if you are interested:

4 UIGradient Animations (Including Rainbow!)

This is a great guide! Learned a lot from it. Although I think there’s a much nicer way to do rainbows (it does require a loop rather than TweenService). For those interested, you can read more about it on this site explaining rainbows and some colour theory behind them, as well as how to implement them (it’s in JavaScript, not Lua). The code carries over quite easily and it’s pretty easy to follow along in case you don’t know JS. The overhead is fairly simple, if you have a UIGradient all you…

But as a rundown, you can just use sinusoidals to generate rainbow (and other repetitive) colour sequences. And due to them being sinusoidals, you can offset them by a phase shift which can be updated every frame. The code for this is below, it’s also in the post I made above.

I didn’t come up with this myself, I read about it here. It’s a long read (and engaging!) but it will help you understand where the code is coming from and what the technique is really doing if you wish to take a look.

local RS = game:GetService("RunService")

local rainbow = script.Parent  -- GUI object
local grad = rainbow.UIGradient

local counter = 0       -- phase shift 
local w = math.pi / 12  -- frequency 
local CS = {}           -- colorsequence table
local num = 15 			-- number of colorsequence points (maxed at 15 or 16 I believe)
local frames = 0		-- frame counter, used to buffer if you want lower framerate updates

RS.Heartbeat:Connect(function()
	if math.fmod(frames, 2) == 0 then
		for i = 0, num do
			local c = Color3.fromRGB(127 * math.sin(w*i + counter) + 128, 127 * math.sin(w*i + 2 * math.pi/3 + counter) + 128, 127*math.sin(w*i + 4*math.pi/3 + counter) + 128)
			table.insert(CS, i+1, ColorSequenceKeypoint.new(i/num, c))
		end
		grad.Color = ColorSequence.new(CS)
		CS = {}
		counter = counter + math.pi/40
		if (counter >= math.pi * 2) then
			counter = 0
		end
	end
	if frames >= 1000 then
		frames = 0
	end
	frames = frames + 1
end)

[Ashp116]

@tralalah

ocal RS = game:GetService("RunService")

local rainbow = script.Parent  -- GUI object
local grad = rainbow.UIGradient

local counter = 0       -- phase shift 
local w = math.pi / 12  -- frequency 
local CS = {}           -- colorsequence table
local num = 15 			-- number of colorsequence points (maxed at 15 or 16 I believe)
local frames = 0		-- frame counter, used to buffer if you want lower framerate updates

RS.Heartbeat:Connect(function()
	if math.fmod(frames, 2) == 0 then
		for i = 0, num do
			local c = Color3.fromRGB(127 * math.sin(w*i + counter) + 128, 127 * math.sin(w*i + 2 * math.pi/3 + counter) + 128, 127*math.sin(w*i + 4*math.pi/3 + counter) + 128)
			table.insert(CS, i+1, ColorSequenceKeypoint.new(i/num, c))
		end
		grad.Color = ColorSequence.new(CS)
		CS = {}
		counter = counter + math.pi/40
		if (counter >= math.pi * 2) then
			counter = 0
		end
	end
	if frames >= 1000 then
		frames = 0
	end
	frames = frames + 1
end)

This really works well, but its moving right to left, I want it to move left the right

[tralalah]

All you have to do is subtract counter inside math.sin instead of adding it. Glad it works well for you

[vastqud (vast)]

You can also do this with UIGradient’s offset property. Just flip the rotation every once in a while and it’s way easier and shorter than anything posted here.

Code:
(could probably be cleaned up but I made it in like 5 minutes)

local speed = 1
rs.RenderStepped:Connect(function(dt)
	gradient.Offset = Vector2.new(gradient.Offset.X + (speed*dt), 0)
	if gradient.Offset.X >= 1 then
		local isRotated = (gradient.Rotation == 180)
		gradient.Rotation = isRotated and 0 or 180; gradient.Offset = Vector2.new(-1, 0) --isRotated and -0.5 or -1
	end
end)

[Cigatronix (Tenrous)]

This is similar to the one provided by roblox in documentation.

UIGradient | Documentation - Roblox Creator Hub

In all honesty, everything that’s been discussed previously on this thread can be accomplished using the RenderStepped loop provided by roblox without taking an entire day of concentration as stated by @Ashp116.

No it took a day of full concentration to make it

A lot of the code that’s been provided sort of complicates things and could potentially cause more client side stress especially because a lot of the loops I’ve seen been being used are loops such as:

while wait() do
    -- code
end

So unless I’m misunderstanding what the purpose of the thread is or what’s trying to be accomplished I suggest just using the link I provided above to create your own moving gradient script with a renderStepped loop that will not stress the client and is very easy to understand.

[FizzyColas (Fizzy)]

Is there a way to make it serversided? If it’s put in a local script only the local player can see it.

[Pixeluted]

Yes use remove event
Do this:

game.ReplicatedStorage.Event.OnClientEvent()
local speed = 1
rs.RenderStepped:Connect(function(dt)
	gradient.Offset = Vector2.new(gradient.Offset.X + (speed*dt), 0)
	if gradient.Offset.X >= 1 then
		local isRotated = (gradient.Rotation == 180)
		gradient.Rotation = isRotated and 0 or 180; gradient.Offset = Vector2.new(-1, 0) --isRotated and -0.5 or -1
	end
end)
end)

And is server do

game.ReplicatedStorage.Event:FireAllClients()

Hope it helps!

[FizzyColas (Fizzy)]

I did this in a localscript:

game.ReplicatedStorage.Event.OnClientEvent()
local speed = 1
local gradient = script.Parent.UIGradient
local rs = game:GetService("RunService")
rs.RenderStepped:Connect(function(dt)
	gradient.Offset = Vector2.new(gradient.Offset.X + (speed*dt), 0)
	if gradient.Offset.X >= 1 then
		local isRotated = (gradient.Rotation == 180)
		gradient.Rotation = isRotated and 0 or 180; gradient.Offset = Vector2.new(-1, 0) --isRotated and -0.5 or -1
	end
end)

And this in the script:
game.ReplicatedStorage.Event:FireAllClients()
Both are under a nametag script in serverscriptservice under the textlabels
but the rainbow isn’t showing up

[Athrex]

How hard is it to make it between a select few colors? Like Red, Dark Red, Light Red. Or White, Black, Gray