UIGradient [LIVE]

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?

You can enable the beta feature in studio:

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)
Rotation
Offset

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:
57 PM

418 Likes

This topic was automatically opened after 18 minutes.

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

15 Likes

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

16 Likes

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

Probably to make gradients

13 Likes

Nevermind, you have to enable it.

Should’ve told us that in the post.
image

18 Likes

Awesome! :smile:
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 :wink:

12 Likes

Already loving this update

crop
crop

282 Likes

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

6 Likes

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.

1 Like

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?

8 Likes

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?

10 Likes

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

Screenshot_1601

76 Likes

I enabled the feature in studio and this popped up… :neutral_face:


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

106 Likes

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

13 Likes

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.
    28 PM
  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.
    21 PM
  3. My color palette window appears behind the gradient window which is a little annoying. :smile:

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! :yum:

Here is what the UI looks in Affinity Designer:
11 PM

30 Likes

WOW! :astonished: 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 :roblox_light: :roblox: :+1:!

86 Likes

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

8 Likes

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)?

1 Like