UIGradient

Why use UIGradient?

UIGradient modifies the appearance of a parent UI object using a ColorSequence. It adds emphasis without an image asset, but a text gradient can reduce legibility if colors are poorly chosen.

Try it in Roblox Studio

Create StarterGui > PracticeGui (ScreenGui) > Banner (Frame) and put this LocalScript inside Banner. Run a client to see the color transition.

Syntax

gradient.Color = ColorSequence.new(startColor, endColor)

Examples

Add a blue gradient to a banner.

local banner = script.Parent
assert(banner:IsA("Frame"))
local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new(
    Color3.fromRGB(26, 90, 220),
    Color3.fromRGB(72, 180, 240)
)
gradient.Rotation = 0
gradient.Parent = banner

ColorSequence describes the colors at the ends of the gradient.
Rotation changes the direction of the transition.
Parenting the gradient to the Frame applies it to that UI object; the Frame still needs a visible Size.

Best practices

Keep text readable over the full gradient.
Use gradients sparingly so they support hierarchy rather than overwhelm it.

Runtime & versions

Luau host; Roblox engine examples require Roblox Studio. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

Luau documentation