UIGradient [LIVE]

Next in line: masks. :upside_down_face:

6 Likes

I love this feature! Heres a gif of a rainbow i wrote in about 5 minutes

79 Likes

This is a really nice update, wanted to make some gradient based UIs in roblox without the need of external programs for a while. This also will allow us to create easier rainbow name tags without crazy hacks/long scripts, thanks for this update :+1:

4 Likes

UDim2?

7 Likes

This was the feature in Roblox that I never knew I wanted.

@DeveloperColton Love the way you did the buttons!
@TheCarbyneUniverse I agree, it would be awesome if we could make radial gradients too!

Really excited about this update. It’s cool seeing what people have made! I think it has two great uses:

  1. Non animated (ie shadows, gradient backgrounds, etc)
  2. Animations (ie text fade in, buttons, etc)

Another thing I figured out is that it will make glowing and animated glowing objects much easier to create in Roblox. This significantly reduces the time it takes to make a fake gradient or workaround and opens the door to new possibilities :smiley:

Haven’t made anything super cool yet (will post later) but here’s a quick example of animated glowing stuff

Static image if the video won't load

image

94 Likes

A very needed update for awhile.
This unlocks a new door so people won’t need external programs to do just a simple gradient on a UI Object they have.
It will also make the Gui easier to manipulate the color instead of switching images a single time, or multiple times depending on the little animation that most players would have to wait for all those images to load in.

I haven’t got a huge look into this, but from @EpicWalnut5’s images above I’d love to work with this in the future!

Also with @gui110’s suggestion I would love to see a bit more variety in icons used for all the UI layout objects (maybe show what it does, but just don’t get too detailed)

That’s it, Cheers! :heart:

9 Likes

@CloneTrooper1019 mentioned this on Twitter not too long ago but it also works with ViewportFrames! Which is a very nice touch indeed.

53 Likes

We finally got the iOS 7 update

42 Likes

Here’s a concept I made in about 5 minutes for some inspiration! Wall shading!

Another great update! Can’t wait for it to go live in the in-game engine! Can’t wait to start using this.

35 Likes

This looks amazing, Roblox just started to work really hard on really needed features.

We got moving grass, player list GUI redesign, new insert object window, shadow map lighting, and now gradient colors for UI, this is amazing job Roblox. Keep it up. I still can’t wait to rounded corners GUI feature to be added, and that would be great, since we would started to use less often design softwares for every GUI element.

9 Likes

You can use Stelrex’s Plugin “Roundify” for now if you need rounded corners real quick. It’s fully customizable and works really well. Occasionally, you’ll get some pretty wonky results though, so maybe be on the look out for a better one.

7 Likes

I did got that plugin, but doesn’t support all values, and doesn’t support auto color. But I hope Roblox will figure out how to make lag-free rounded corners for GUI elements.

3 Likes

This is simply amazing! I can’t stop to think where I wouldn’t use this. (GUI to Viewports.) Here’s a quick thing I made while messing around with them.

20 Likes

You mean I don’t have to use photoshop when making gradients? This has been an update that should have been here since the get-go. Thank you!

9 Likes

This is amazing! I love this update. I can’t decide what to make with it first.
Now we just need GUI masks :thinking:.

6 Likes

been waiting for this for such a long time, ui’s will look a lot cooler now

1 Like

This is a great feature, love it! One question that I do need answered, does anyone know how to make the gradient effect take place on the text itself, not the background, I’m currently using it like this, with the UIGradients parent as the text.

1 Like

Hey there Avia,
I think I know what your talking about, in order to fix this try the following:

  1. Set the background transparency to 0.
  2. Change the text color to white.

Example:
Screenshot_1603

25 Likes

Hey, cheers for that, have a good one.

4 Likes

I’ve been keeping my eye on this feature for a while now and I have to say this is my favourite feature of the year! You can get extremely creative with the effects

10 Likes