UIGradient [LIVE]

[0xabcdef1234]

@0xabcdef1234

Update: we just enabled a property “Enabled” on UIGradient (which is similar to enabled on beams) so that you don’t have to create/destroy a gradient instance every so often to create a periodical effect, instead you can check/uncheck this boolean.

What is UIGradient?

As a UIComponent, it blends color gradient to its parent GuiObject. Supported object including: TextLabel / TextButton / ImageLabel / ImageButton / Frame / ViewPortFrame. (ScrollingFrame and TextBox is temporarily excluded.)

Note that:

• Gradient will be applied with multiplication of original color of GuiObject, i.e if you blend gradient with a black frame, the result will be black, while blending with a white frame will not alter the gradient color.
• Gradient will be applied to all the context of GuiObject, i.e parenting a gradient under a textlabel with background will make both the background and text blend with this gradient.
• Gradient will not recursively apply onto all the children of the hierarchy. It will only affect parent for now.

How do I use it?

To use the UIGradient, simply parent it onto the guiobject that you want it to take effect on.
There are currently 4 configurable properties affecting the appearance of gradient:

• Color (ColorSequence) : The sequence of Color3 of color gradient.
• Transparency (NumberSequence) : The sequence of Transparency of color gradient.
• Rotation (float) : Euler angle rotation of gradient with 0 indicates horizontal gradient starting from left to right.
• Offset (Vector2): Shift the center of gradient to the scale of parent.

Extra Tips For Advanced Users

There are some tips for devs that pay extra concerns for performance of your places across platforms.

• If you are animating gradient to achieve special effects, it is always more performant to preset trasparency sequence and color sequence, and animate gradient using rotation, offset and some extra help of original gui object color for color shifting. Reset the color sequence and transparency sequence every frame will add extra burden because of rebuilding the sequence of colors.
• Try to avoid using it on stroke text. Gradient will always try to blend with text strokes and frame borders, which might cause performance glitch if you are not paying attention.
• If you are just creating a static gradient background for a button, using a pre-made gradient texture would be better when it comes to performance. While we will improve our internal technique to make this comparable to using a plain texture in the future.

This feature is currently in beta release, which means the object can only be used in Studio. Hope we can collect useful feedback from you guys and release it for all soon.

FAQ

How does the rotation and offset work? Why there is a scale get applied when rotating it?

Gradient is internally represented using control points which maps the color and number sequences along from 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 parent rectangle.
Here are the visualization for how control points moves when you are applying rotation and scale to it. (Red : Start, Blue : End)

When will this officially release to prod game?

Our currently planned official release date is early January around first week.

Gradient will be applied with “multiplication” of original color of GuiObject, what does this mean?

An example for the effect of parent colors:

[VVarioVVare]

Real excited for this feature, but how will it be used?

[Rawblocky]

I’m confused, it doesn’t seem to work?

[unmiss (Jack)]

Same, doesn’t appear to do anything for me yet.

@VVarioVVare

Real excited for this feature, but how will it be used?

Probably to make gradients

[Rawblocky]

Nevermind, you have to enable it.

Should’ve told us that in the post.

[Hexcede]

Awesome!
It’s cool to see how fast this went from feature request to feature! The implementation of this is actually pretty good as well!

Edit: Now all we need is UIRounded
Edit2: Nevermind it’s called UICorners

[EpicWalnut5]

Already loving this update

[joa_n]

Awesome update, can’t wait to try it out!

[nezuo]

To me, the offset property with rotated gradients doesn’t make much sense. If this could be explained a little more it would be helpful.

[ChipioIndustries (chipio)]

I’ve been hyped for this ever since I saw the API diff. Great stuff!

Is there any plan to support multiple gradients per object? Or perhaps radial gradients?

[Kullaske]

WOAH, This sounds so cool and epic!

I saw the new instance created but I couldn’t figure out how to get it working. To anyone else confused, make sure to enable it under the beta tab.

Is there a possible ETA on when this will be fully released onto the client?

[DeveloperColton]

Awesome update, it’ll defiently allow gradient based user-interfaces to be made much easier!

[SkySpell]

I enabled the feature in studio and this popped up…

(For real though, this is a great! Can’t wait til it gets out of beta)

[DruidPC (Nihlity)]

After years, it’s finally here. The long awaited GRADIENT! Finally, we can make animated rainbow guis!

[gui110 (GUI)]

Really, great to hear about this feature. I wonder how I’ve been living all those years without gradients!

Here are some of my observations:

1. It think it is confusing to have the gradient with the same icon as the layout objects. I would really like if it was different and more recognizable.
   
2. We can drag the color nodes outside the range, which doesn’t affect anything when you release the mouse, though it feels weird to just be able to do it.
   
3. My color palette window appears behind the gradient window which is a little annoying.
   
   

Overall, I’m really happy to see this feature! Though I feel like the UI could be improved. Maybe it’s too hard to select the little triangles to move the colors for example. I feel like they are a little too small.
I’m used to using Affinity Designer, for example, where the UI is more friendly… but I guess it isn’t fair to compare Roblox to a graphical software. So anyhow, thanks for this feature, that’s a good way to start December!

Here is what the UI looks in Affinity Designer:

[TheCarbyneUniverse (Carbyne)]

WOW! Awesome update (as many can see with the number of likes this topic has).

Just one feature that I think should be added along with this: radial gradients with configurable centers.

Linear gradients can get quite … linear and too boring. Therefore, radial gradients spice up the world of color blending and would open us up to a wide array of choices (i.e.center in the top left, top right, center, etc.).

This is based on Google Drawings, which I used before this update was added. Instead of just the five radial gradient choices for where to place the center, it would be better if we can instead use numbers to position the center (like XY coordinates).

Nevertheless, this is an awesome update and it warms my heart to see these quality UI updates getting pushed out. Keep it up Roblox !

[Sgt_Meatball (TheReal_NielsBohr)]

This is so cool. This is easily my favourite update of 2019. Thank you Roblox!

[Hacreey]

Awesome to finally be able to do this! Would there be any possibility to extend this into full on images (images such as textures being rendered inside of text, other images, etc)?