UIGradient

Not yet Class GUI

Applies a color and transparency gradient to the parent GuiObject.

Not implemented yet

Gradient fills need per-vertex colours in the GUI renderer.

Workaround: Bake the gradient into an image and use ImageLabel/ImageButton.

0 Nova members · 14 modern Roblox members not implemented yet

Description

UIGradient applies a color and transparency gradient to the parent GuiObject. The appearance of the gradient is configurable through its Color, Transparency, Offset, Rotation, Scale, TileMode, and Type.

UIGradient will not apply to child or descendant GuiObjects. In order to apply the same gradient to multiple objects, you will need multiple gradient instances.

See also appearance modifiers for more information on the UIGradient modifier and how it works.

Supported Objects

You can apply UIGradient modifiers to Frame, TextLabel, TextButton, ImageLabel, ImageButton, Path2D, and ViewportFrame. However, ScrollingFrame and TextBox are not currently supported.

Performance Considerations

In order to efficiently use a UIGradient, follow these principles:

• Avoid using more than 6 color stops on the Color sequence.

• Avoid using a UIGradient on any object that applies a text stroke (TextStrokeColor3), as the gradient will try to blend with strokes and borders, and may cause performance issues.

• Avoid setting Color and Transparency frequently: this causes the sequence of colors to rebuild often, which is expensive. If possible, set these properties only once and try to animate the Offset or Rotation properties to achieve a similar effect. Alternatively, you can change the color of the parent GuiObject using such properties as BackgroundColor3, ImageColor3, or TextColor3.

• When applying an unchanging gradient on a UI element whose state changes a lot, there is a tradeoff between using a UIGradient (processing time) and a static gradient image (memory).

Inheritance

Object → Instance → UIBase → UIComponent → UIGradient

Properties

Member	Signature	Summary
Color	Color: ColorSequence	Determines the color blended with the parent GuiObject along the length of the gradient.
Enabled	Enabled: bool	Whether the gradient is enabled or not.
Offset	Offset: Vector2	Determines the scalar translation of the gradient from the center of the parent GuiObject.
Rotation	Rotation: float	Determines the clockwise rotation in degrees of the gradient starting from left to right.
Scale	Scale: float	Multiplies the extent of the gradient, controlling how much of the color/transparency sequence is visible within the element.
TileMode	TileMode: GradientTileMode	Determines how the gradient repeats.
Transparency	Transparency: NumberSequence	Determines how much the parent GuiObject can be seen through along the length of the gradient.
Type	Type: GradientType	Determines the shape of the gradient as linear, radial, elliptical, or conical.

Roblox reference: UIGradient

Generated from Nova's API dump and Roblox creator-docs. Nova-only members come from the engine's reflection metadata.