GSmGpE6CwX2y9JjB25B8 An introduction to applying gradient to UI Objects

"> An introduction to applying gradient to UI Objects

">
We use cookies on this site to enhance your user experience

Applying UIGradients

Applying UIGradients

5 min

How to apply UIGradient in Studio

In order to apply a UIGradient to your UI object, insert UIGradient as a child object of the GuiObject.

Next, configure the UIGradient to apply the colors you would like. Click on Color → ColorSequence and then click the … button to open the Color Sequence Editor.

The Color Sequence Editor is where you set the different colors for your gradient. Click to add a key point for your color sequence, and then select the color you would like to add. This is an example of the Color Sequence Editor and the Frame that the Gradient is being applied to, with a large number of colors selected (we went a little overboard here!):

You can also apply Transparency to the entire gradient, or to specific points on the gradient. To apply Transparency, select the Transparency option by clicking the entry field (it will say “0” or “<NumberSequence”) and then click the … button to bring up the Number Sequence Editor.

You can use the Number Sequence Editor to apply Transparency to certain sections of your gradient. Click to add key points for transparency. Add points near the top to add more transparency and add points near the bottom for less transparency. You can drag the points to alter the values, or edit them manually below.

How Gradient is Applied

The Gradient will be applied with multiplication of the original color of the GuiObject
If you blend the gradient with a black frame or text, the result will be black
If you blend the gradient with a white frame or text, will not alter the gradient color
The Gradient will be applied to the content of the parent GuiObject
Parenting a UIGradient under a TextLabel with a background, border and text will blend the gradient with all of these elements
The Gradient will not recursively apply to all the children under the parent
Gradient applied through Multiplication
When the gradient colors are applied through multiplication, it uses a combination of the source color and the gradient.

Example - application of a gradient on different parent colors:

57 PM

Rotation and Offset

Gradient is internally represented using control points which maps the color and number sequences from a start control point (time = 0) to end control point (time = 1). To guarantee colors get fully preserved when rotating the gradient, we make the control points always rotate on the edge of the parent rectangle.

This is a visualization for how control points move when rotation and an offset is applied. (Red = Start, Blue = End)
Rotation
Offset

Pro Tips For Advanced Users

Adding a huge number of colors may impact performance so be smart about how you apply gradient
We recommend using no more than 6 colors in normal situations
If you are animating the gradient to achieve a special effect, you will want to preset the transparency sequence and color sequence, and then animate the gradient by updating the rotation and/or offset
Resetting the color sequence and transparency sequence every frame is not as efficient because the sequence of colors will rebuild every frame
You can also try altering the base color of the parent GuiObject instead of altering the gradient colors
Avoid using Gradient on text with text stroke
Gradient will always try to blend with text strokes and frame borders, which will likely cause performance issues
If you are just creating a static gradient background for a button, there is a trade between gradient (processing time) and a pre-made gradient image (memory), so choose wisely based on your needs