How did you apply it to the text? I can only apply it to the BG
Absolutely stunning! I’ve been waiting ages for this! Thank you <3
1 Like
Until I saw this I asked myself “what’s the point?”
We need more gradients lmao
this would actually make car design a lot easier, thanks roblox!
1 Like
Make the text white. Then it works
2 Likes
How did you get the shadows on the buttons? I love these.
3 Likes
Is there any estimate on when this will be live in games?
1 Like
Man you can bet I’ll be waiting for radial gradients until they get added
Could we get an ETA of when this feature will come out of beta? Myself (and others) we may not want to design projects using the gradient component if it’s going to be coming out in months from now.
3 Likes
Correct me if I’m wrong, but Gradients should be visible on Client?
1 Like
Apologies for not clarifying, yes, it is visible in client, but from my knowledge, not ingame.
Glad the UI editor is getting alot more features, gradients are gonna be great. Thanks for the updates <3
I can’t find the beta feature activation menu in Studio…
First time using UIGradients and it’s to make something that it was never intended for. Love it.
26 Likes
Already started using it. I made a simple configuration to the Util module in MessageCreatorModules in inside the Chat Script to add gradients to chat UI objects.
This year’s updates have been for the most part, amazing!
I am also interested in a concept @ZoomCode mentioned; will there ever be a feature to scale the curve factor of corners on UI elements?
I linked a model I updated below on how I did this and explained how it works shortly for any interested.
A use case for rainbow text could be special people in your getting their own more stylized chat messages!
Here is how I did it for those wondering!
For those wondering and want to do it them self.
If you do not care on how it works then here is a simple model I uploaded that you can use.
https://www.roblox.com/library/4510858792/Ungroup-In-Chat
Put the contents of the model inside the Chat service. 
A methods:addGradient function.
function methods:addGradient(uiElement)
local newGradient = Instance.new("UIGradient")
local random = math.random
local sequence = ColorSequence.new(
Color3.new(1, 1, 1),
Color3.fromHSV(((tick() * 100) % 360) / 360, 1, 1) --// quick method to generate rainbow text
)
newGradient.Color = sequence
newGradient.Parent = uiElement
end
Then I appended methods:CreateBaseMessage and methods:AddNameButtonToBaseMessage for a quick way to add the gradient.
function methods:CreateBaseMessage(message, font, textSize, chatColor)
local BaseFrame = self:GetFromObjectPool("Frame")
BaseFrame.Selectable = false
BaseFrame.Size = UDim2.new(1, 0, 0, 18)
BaseFrame.Visible = true
BaseFrame.BackgroundTransparency = 1
local messageBorder = 8
local BaseMessage = self:GetFromObjectPool("TextLabel")
BaseMessage.Selectable = false
BaseMessage.Size = UDim2.new(1, -(messageBorder + 6), 1, 0)
BaseMessage.Position = UDim2.new(0, messageBorder, 0, 0)
BaseMessage.BackgroundTransparency = 1
BaseMessage.Font = font
BaseMessage.TextSize = textSize
BaseMessage.TextXAlignment = Enum.TextXAlignment.Left
BaseMessage.TextYAlignment = Enum.TextYAlignment.Top
BaseMessage.TextTransparency = 0
BaseMessage.TextStrokeTransparency = 0.75
BaseMessage.TextColor3 = chatColor
BaseMessage.TextWrapped = true
BaseMessage.ClipsDescendants = true
BaseMessage.Text = message
BaseMessage.Visible = true
BaseMessage.Parent = BaseFrame
methods:addGradient(BaseMessage) --// add the gradient
return BaseFrame, BaseMessage
end
function methods:AddNameButtonToBaseMessage(BaseMessage, nameColor, formatName, playerName)
local speakerNameSize = self:GetStringTextBounds(formatName, BaseMessage.Font, BaseMessage.TextSize)
local NameButton = self:GetFromObjectPool("TextButton")
NameButton.Selectable = false
NameButton.Size = UDim2.new(0, speakerNameSize.X, 0, speakerNameSize.Y)
NameButton.Position = UDim2.new(0, 0, 0, 0)
NameButton.BackgroundTransparency = 1
NameButton.Font = BaseMessage.Font
NameButton.TextSize = BaseMessage.TextSize
NameButton.TextXAlignment = BaseMessage.TextXAlignment
NameButton.TextYAlignment = BaseMessage.TextYAlignment
NameButton.TextTransparency = BaseMessage.TextTransparency
NameButton.TextStrokeTransparency = BaseMessage.TextStrokeTransparency
NameButton.TextColor3 = nameColor
NameButton.Text = formatName
NameButton.Visible = true
NameButton.Parent = BaseMessage
methods:addGradient(NameButton) --// add the gradient
local clickedConn = NameButton.MouseButton1Click:connect(function()
self:NameButtonClicked(NameButton, playerName)
end)
local changedConn = nil
changedConn = NameButton.Changed:connect(function(prop)
if prop == "Parent" then
clickedConn:Disconnect()
changedConn:Disconnect()
end
end)
return NameButton
end
36 Likes
May you make it public, currently it’s private.
1 Like
I swear I toggled Allow Copying to true. Anyways, thanks for noting that as I apparently did not. 
It has been changed.
3 Likes
Works fine for me. ColorSequences were introduced quite a while ago anyway.
How would you make the curved AGREE button with the UIGradient as I can’t seem to create the curved part?