UIGradient [LIVE]

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

Indeed! It appears to me that Roblox is rolling out better and better updates to optimize the User experience. Which is a great improvement for the whole company as a whole as many will benefit from these amazing updates! :slight_smile:

2 Likes

The first thing I tried out with this feature was making some special effects for rare titles/tags in my upcoming game which was when I discovered that tiling was not default/or even an option at the moment.

I totally didn’t expect for this update. I really love this new gradient feature :stuck_out_tongue:

1 Like

How did you make the Text have gradient? Only the background seems to have gradient for me.

2 Likes

You may need to change the TextColor value to, Color.fromRGB(255, 255, 255) Institutional White.

1 Like

Alright, Thanks. I’m going to try that now.

1 Like

No worries! Here’s something that I did in around 5 minutes using the UIGradient : image

7 Likes

awesome ROBLOX gradients
Need I say more?
This is such an amazing update. Can’t wait to see how people will use this in their game UI!

2 Likes