Ui Gradient on overhead GUI

I am trying to make an overhead GUI that includes gradients for some of the different options. Currently everything works but when i go to select the ones that should be gradients they just appear white. Im pretty sure the reason for this is I am using the text colour of the text button to show above the head and for the gradients they are white.

My question is is there a way to either have the actual TextColor3 value as a gradient or how i can work around this and still achieve the gradient.

Here is the code which applies the overhead GUI:

wait(0.5)
for i,v in pairs(script.Parent.Titles:GetChildren()) do
	v.MouseButton1Down:connect(function()
		local player = game.Players.LocalPlayer
		local leaderstats = player:FindFirstChild("CoinStat")
		if leaderstats then
			local Coins = leaderstats:FindFirstChild("Coins")
			if Coins then
				local Cost = v:FindFirstChild("Cost")
				if Cost then
					if Coins.Value >= Cost.Value then
						game.ReplicatedStorage.GamerTagAdd:FireServer(v.Name,v.TextColor3)
					end
				end
			end
		end
	end)
end

Some relevant screenshots:


1 Like

Heres how you can create/apply gradients:

local Gradient = ColorSequence.new({
	ColorSequenceKeypoint.new(0,Color3.new(1, 0, 0)),
	ColorSequenceKeypoint.new(0.5,Color3.new(0, 1, 0)),
	ColorSequenceKeypoint.new(1,Color3.new(0, 10 1)),
})

script.Parent.Color = Gradient

This is an example of how you would set a gradient on a UIGradient, it just gives you an idea of how to do it

I am understanding you want the text color to be a gradient, so hopefully this works for you Gradients for text color? - #2 by jaipack17

This is exactly what i used to show the gradient in the UI

I have set the gradient i just need it to apply when i apply the overhead GUI. the problem i have is that

if Coins.Value >= Cost.Value then
						game.ReplicatedStorage.GamerTagAdd:FireServer(v.Name,v.TextColor3)
					end

this part is what makes the overhead gui and it uses the textcolor3 for the colour, however the colour of the gradient is done within a UIGradient on the actual text button

I do not quite get what you’re asking. Are you trying to change the gradient of the text? Also, the event doesn’t show much can you show the server code that applies the gradient?

I am trying to make it so that the gui above my head in game shows the same gradient as the text on the ui that i achieved using a UIGradient.
Screenshot 2024-09-19 053216
Screenshot 2024-09-19 053143
Screenshot 2024-09-19 053853

1 screenshot showing UI in game
1 screenshot showing regular text colour working fine
1 screenshot showing one that i would like to have a gradient just appearing white.

This screenshot shows how i achieved the gradient for the UI.

Here is every seperate code that controls the overhead gui.

wait(0.5)
for i,v in pairs(script.Parent.Titles:GetChildren()) do
	v.MouseButton1Down:connect(function()
		local player = game.Players.LocalPlayer
		local leaderstats = player:FindFirstChild("CoinStat")
		if leaderstats then
			local Coins = leaderstats:FindFirstChild("Coins")
			if Coins then
				local Cost = v:FindFirstChild("Cost")
				if Cost then
					if Coins.Value >= Cost.Value then
						game.ReplicatedStorage.GamerTagAdd:FireServer(v.Name,v.TextColor3)
					end
				end
			end
		end
	end)
end
game.Players.PlayerAdded:connect(function(player)
player.CharacterAdded:connect(function(char)
	wait(1)
	local GamerTag = game.Lighting.GamerTag:Clone()
	local Head = char:FindFirstChild("Head")
	if Head then
		GamerTag.Parent = Head
		local TextLabel = GamerTag:FindFirstChild("TextLabel")
		if TextLabel then
			local GamerTagText = player:FindFirstChild("GamerTagText")
			local GamerTagColor = player:FindFirstChild("GamerTagColor")
			if GamerTagText and GamerTagColor then
				TextLabel.Text = GamerTagText.Value
				TextLabel.TextColor3 = GamerTagColor.Value
			end
		end
	end
end)	
end)

function onwin(player,Value,Color)
local GamerTagText = player:FindFirstChild("GamerTagText")
local GamerTagColor = player:FindFirstChild("GamerTagColor")
if GamerTagText and GamerTagColor then
   GamerTagText.Value = Value
   GamerTagColor.Value = Color
end
local Head = player.Character:FindFirstChild("Head")
if Head then
	local GamerTag = Head:FindFirstChild("GamerTag")
	if GamerTag then
		local TextLabel = GamerTag:FindFirstChild("TextLabel")
		if TextLabel then
			local GamerTagText = player:FindFirstChild("GamerTagText")
			local GamerTagColor = player:FindFirstChild("GamerTagColor")
			if GamerTagText and GamerTagColor then
				TextLabel.Text = Value
				TextLabel.TextColor3 = Color
			end
	end
	end
	end
end
game.ReplicatedStorage.GamerTagAdd.OnServerEvent:connect(onwin)
local DataStore = game:GetService("DataStoreService")
local ds = DataStore:GetDataStore("GamerTagTextSaveSystemDataSet")
game.Players.PlayerAdded:connect(function(player)
local GamerTagText = Instance.new("StringValue",player)
GamerTagText.Name = "GamerTagText"
local GamerTagColor = Instance.new("Color3Value",player)
GamerTagColor.Name = "GamerTagColor"
GamerTagColor.Value = Color3.fromRGB(28,255,168)
GamerTagText.Value = ds:GetAsync(player.UserId) or ""
ds:SetAsync(player.UserId, GamerTagText.Value)
GamerTagText.Changed:connect(function()
ds:SetAsync(player.UserId, GamerTagText.Value)
end)
end)


game.Players.PlayerRemoving:connect(function(player)
ds:SetAsync(player.UserId, player.GamerTagText.Value)
end)
1 Like

You can’t change the text’s gradient like this. The way the effect works is by having a UIGradient that’s changing the color parented under the text label, the text label having a background transparency of 1, and its text color set to white.

This means if you wanted to change the gradient you’d have to directly change the UiGradients color, not the textColor. The problem with your code is that you rely on what I’m assuming is a Color3 value to save your colors which won’t work. Because most of the settings is on the server you should create a table full of ColorSequences.

Example:

local GamerTagColors = {
	["Divine  Hunter"] = ColorSequence.new({
		ColorSequenceKeypoint.new(0, Color3.new(1,0,0)),
		ColorSequenceKeypoint.new(1, Color3.new(0,0,1))
	})
}

--Inside the CharacterAdded
if GamerTagText and GamerTagColor then
	TextLabel.Text = GamerTagText.Value
	TextLabel.UIGradient.Color = GamerTagColors[GamerTagText.Value]
end

--Inside the local script
game.ReplicatedStorage.GamerTagAdd:FireServer(v.Name)

--Inside serverscript event
if GamerTagText and GamerTagColor then
	TextLabel.Text = Value
	TextLabel.UIGradient.Color = GamerTagColors[Value]
end

Okay i understand what you are saying but i dont fully know how to properly implement it

Basically, you will save your gradients in a table with the character names being the key to them. If the text labels have the same structure as the one on your screen GUI then all you will need to do is index the table and set its value to the value of the text label’s UIGradient color

so would the table go in a new script or in one im already using?

im just struggling to work out how to actually apply everything to what ive already got

I would personally use a module to store all the gradients, which would then be required on my main server script.