UIGradient [LIVE]

You just gave me an idea for a hover effect on buttons :slightly_smiling_face:

It’s all built-in Roblox, the font is Gotham.

Amazing feature! I think that Roblox developers will be able to utilize this feature greatly, because of the numerous purposes it can serve.

After trying out this feature, I’ve been thinking about the many uses it can have.

Super excited for this feature, and hope to see improvements for using them more statically as well! Features like this are what enable developers like never before, and that’s awesome stuff!

As others have said, I hope to see before final release more gradient types, such as Radial.

However I more so hope to see Angle style, in which the gradient wraps around sweeping counterclockwise. For example, a quick radar effect could be achieved with just a green Angle gradient that faded out, and then just had the Rotation constantly spun. Also would make for some cool outline effects (instead of the current that has to have the effect on both sides which means it also needs to be a reflected gradient to look right).

Wait when did player list GUI design get introduced? I can’t find a post on that.

3 Likes

Thanks for you nice feedback, we will address this ASAP.
I will forward the following color sequence editing experience improvement to studio team too.

8 Likes

We have been looking into this for some time, while we have some technical limitations for it to work nicely with multiple color points while perform well on certain mobile devices. It should be possible for us to nicely support 2 colors, while it is hard for us to guarantee that we cover your use cases.
In addition if you can provide your vision of use cases on this, it would be really helpful.

4 Likes

Any word of this coming to the “Beam”?

Radial gradients are generally more appealing than linear gradients for almost all UI objects; but other than just the looks, they are also useful for effects like vignettes.

Use cases vary greatly because this can be used anywhere from a hover effect of a UI button to a particle effect for post-processing.

1. Radial Gradients are Smoother Than Linear Gradients

As an exemplary use case, buttons can have gradient:


Especially for colors of completely different hues (like pink and blue), it is best to use radial gradients as it simply looks smoother. Above, the linear gradient transitions from pink to blue very quickly and the area where they blend is very small. For the radial one, however, it simply looks a lot smoother. It transitions at a nice rate.

2. Great for Vignettes (esp. Dynamic Ones)


A great effect that is easy to achieve due to radial gradients would be vignettes, especially ones that are constantly changing. As many of us may know, vignettes can be used in horror games to “horrify” the player more, but there are countless other implications of it as well. Setting Color1 (aka the center) as transparent and then setting Color2 (aka edges) to a semi-transparent or completely opaque color is what creates this popular effect. As opposed to the current way of iterating through the ImageTransparency of an image of a vignette, creating this via radial gradients does yield a more desirable result (vignettes do not simply fade in, their semi-transparent parts tween in from the outside).

There are a lot more major applications of radial gradients than what I listed, but these two reasons are most valuable to my development (and I’m sure it is for many other UI artists).

38 Likes

This feature is so cool that I can make cool chat tag!image

25 Likes

and message, too!
asd

34 Likes

Would it be possible to have a static center of rotation?
A Vector 2 value that the rotation spins around so that you can create effects across multiple different gui instances.

1 Like

I can’t wait when it’s out, i just want to release update in my game :heart_eyes:

1 Like

For me, angular gradients would be really useful if you are considering other styles to add. I mentioned this in a feature request thread too, but just having more types in general is greatly useful for UI development.

For me angular would be the go to option for any rotating effect (such as a radar effect, or an animated outline where a color chunk spun around the boarder of a GUI element. Currently with linear spinning you get more deformation and also have to have the effect symmetrical or the other half that will show up will be backwards.

3 Likes

Omg finally! Maybe we could also get like bendable text so there isn’t so much Text outsourcing?

1 Like

This is a great feature, and a long awaited one! I’m glad to see this finally come out, as now I could focus more on Studio, than Photoshop, :joy:

1 Like

This is amazing! I’d love to see an option to make the gradient tile when it is offset though

2 Likes

Same here! I’d figure that they’re going to add a nice group of features to this, :slight_smile: .

2 Likes

Yeah! I can’t wait to see how far they take this! Watching roblox grow with things like these is so fun! Maybe you will be able to add gradients to other things like your group page.

2 Likes