UIGradient
Applies a color and transparency gradient to the parent GuiObject.
| Memory category | Instances |
|---|
Member index 8
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
UIGradienton 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).
History 40
- 732 Change Tags of Type from [] to [NotBrowsable]
- 732 Change Tags of TileMode from [] to [NotBrowsable]
- 732 Change Tags of Scale from [] to [NotBrowsable]
- 731 Change Default of Type from to Linear
- 731 Change Default of Transparency from to NumberSequence(0 0 0 1 0 0 )
- 731 Change Default of TileMode from to Clamp
- 731 Change Default of Scale from to 1
- 731 Change Default of Rotation from to 0
- 731 Change Default of Offset from to Vector2(0, 0)
- 731 Change Default of Enabled from to true
- 731 Change Default of Color from to ColorSequence(0 1 1 1 0 1 1 1 1 0 )
- 726 Add Type
- 726 Change Default of Transparency from NumberSequence(0 0 0 1 0 0 ) to
- 726 Add TileMode
- 726 Add Scale
- 726 Change Default of Rotation from 0 to
- 726 Change Default of Offset from Vector2(0, 0) to
- 726 Change Default of Enabled from true to
- 726 Change Default of Color from ColorSequence(0 1 1 1 0 1 1 1 1 0 ) to
- 553 Change Default of Transparency from to NumberSequence(0 0 0 1 0 0 )
- 553 Change Default of Rotation from to 0
- 553 Change Default of Offset from to Vector2(0, 0)
- 553 Change Default of Enabled from to true
- 553 Change Default of Color from to ColorSequence(0 1 1 1 0 1 1 1 1 0 )
- 486 Change ThreadSafety of Transparency from ReadOnly to ReadSafe
- 486 Change ThreadSafety of Rotation from ReadOnly to ReadSafe
- 486 Change ThreadSafety of Offset from ReadOnly to ReadSafe
- 486 Change ThreadSafety of Enabled from ReadOnly to ReadSafe
- 486 Change ThreadSafety of Color from ReadOnly to ReadSafe
- 462 Change ThreadSafety of Transparency from to ReadOnly
- 462 Change ThreadSafety of Rotation from to ReadOnly
- 462 Change ThreadSafety of Offset from to ReadOnly
- 462 Change ThreadSafety of Enabled from to ReadOnly
- 462 Change ThreadSafety of Color from to ReadOnly
- 423 Add Enabled
- 412 Add Transparency
- 412 Add Rotation
- 412 Add Offset
- 412 Add Color
- 412 Add UIGradient
Members 8
Color
| Type | Default | |
|---|---|---|
| ColorSequence | 0 1 1 1 0 1 1 1 1 0 | |
This property describes the color to blend with the parent GuiObject along the provided ColorSequence. This property works in a similar manner to Beam.Color or Trail.Color, except that it applies over a distance determined by the Offset and Rotation.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true |
History 6
- 731 Change Default of Color from to ColorSequence(0 1 1 1 0 1 1 1 1 0 )
- 726 Change Default of Color from ColorSequence(0 1 1 1 0 1 1 1 1 0 ) to
- 553 Change Default of Color from to ColorSequence(0 1 1 1 0 1 1 1 1 0 )
- 486 Change ThreadSafety of Color from ReadOnly to ReadSafe
- 462 Change ThreadSafety of Color from to ReadOnly
- 412 Add Color
Enabled
| Type | Default | |
|---|---|---|
| bool | true | |
Whether the gradient is enabled or not.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true |
Offset
| Type | Default | |
|---|---|---|
| Vector2 | 0, 0 | |
This property determines the scalar translation of the gradient from the
center of the parent GuiObject. It is a scalar translation,
meaning that the actual pixel offset is determined by the
AbsoluteSize of the parent
GuiObject. For example, a value of (1, 0) shifts the gradient
horizontally to the right by a distance equal to the parent object's size.
Depending on the Rotation, this may cause the
gradient to be partially visible or not visible at all.
Also see Rotation which also affects the geometry of the applied gradient.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true |
Rotation
| Type | Default | |
|---|---|---|
| float | 0 | |
This property determines the clockwise rotation in degrees of the
UIGradient starting from left to right. The beginning and end control
points snap to the edges of the parent GuiObject, but maintain the
provided rotation.
Also see Offset which also affects the geometry of the applied gradient.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true |
Scale
| Type | Default | |
|---|---|---|
| float | 1 | |
This property multiplies the extent of the gradient, controlling how much of the color/transparency sequence is visible within the parent GuiObject.
A value of
1(default) means the full sequence spans the element exactly once.Values less than
1compress the gradient so that the full sequence fits in a smaller region. The remaining area is determined by TileMode. Note thatScaleis clamped to a minimum of0.001to avoid degenerate gradients.Values greater than
1stretch the gradient beyond the element bounds so that only a portion of the sequence is visible.
The effect of Scale also depends on the gradient's
Type:
GradientType.Linear —
Scaleaffects the distance between the start and end control points.GradientType.Radial —
Scaleaffects the radius of the radial gradient.GradientType.Conical —
Scaleaffects the angular sweep, clamped so that the sweep does not exceed a full revolution.
See also TileMode which determines how the
gradient repeats when Scale causes it to not fill the entire element.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true |
TileMode
| Type | Default | |
|---|---|---|
| GradientTileMode | Clamp | |
This property determines what happens when the gradient
Scale is less than 1 or when
Offset shifts the gradient so that it does not
fully cover the element. See GradientTileMode for possible values
and their effect.
See also Scale which controls how much of the color/transparency sequence is visible.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true |
Transparency
| Type | Default | |
|---|---|---|
| NumberSequence | 0 0 0 1 0 0 | |
This property describes how opaque the parent UI element will be along the provided NumberSequence. This property works in a similar manner to Beam.Transparency or Trail.Transparency, except that it applies over a distance determined by the Offset and Rotation.
Note that the envelope values of the NumberSequenceKeypoints are ignored.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true |
History 6
- 731 Change Default of Transparency from to NumberSequence(0 0 0 1 0 0 )
- 726 Change Default of Transparency from NumberSequence(0 0 0 1 0 0 ) to
- 553 Change Default of Transparency from to NumberSequence(0 0 0 1 0 0 )
- 486 Change ThreadSafety of Transparency from ReadOnly to ReadSafe
- 462 Change ThreadSafety of Transparency from to ReadOnly
- 412 Add Transparency
Type
| Type | Default | |
|---|---|---|
| GradientType | Linear | |
This property determines how the gradient varies across the parent GuiObject. See GradientType for possible values and their effect.
See also Scale which controls how much of the color/transparency sequence is visible, and TileMode which determines repetition behavior.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true |