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?
It’s a ImageButton. You have to make the image and upload it as a decal to do it 
2 Likes
Really? THATS Roblox?!?
This will be really good for new UI designs. Can’t believe gradients are being added!
Cool, but it’s too limited right now.
Two improvements I’d like to see:
- More types of gradients like radial, diamond, etc (linear is a little boring)
- Ability to have it affect all siblings/descendants of its container (this would be… astronomical. say hello to making REALLY pretty UI effects)
4 Likes
This will surely make gui making a lot easier and not having to use a third party program to make a gradient image.
2 Likes