[Studio Beta] Upgraded UI Gradients

Updates Announcements
, , ,
1

Hi Creators,

Upgraded UI Gradients are now available in Studio Beta! :tada:

We’ve heard your request for more flexibility when styling interface elements without relying on custom-textured image assets. Today, we’re bringing three highly requested enhancements straight to the UIGradient instance: Radial and Conical gradient types, Tile Modes (Repeat and Mirror), and Gradient Scale controls!

Additionally, these upgraded gradient capabilities fully support Path2D instances, opening up brand-new possibilities for dynamic graphics and custom UI flourishes.

image10
image101278×1504 108 KB

Keep reading to learn more!

:hammer_and_wrench: How to Enable the Beta

You can test these new gradient features in Studio today by enabling the beta flag:

  1. Open Roblox Studio and navigate to File > Beta Features.
  2. Locate and check the box for Upgraded UIGradients.
    image5
    image51312×730 54.4 KB
  3. Click Save and restart Studio when prompted.

:warning: During this Studio beta period, you can’t publish live games with new UIGradient capabilities. Once we release these features to the client, they will be available to use in-game.

:artist_palette: New Gradient Capabilities

We have expanded the UIGradient instance with three new properties.

  1. UIGradient.Type: Determines how color transitions across your UI object. The options are:
    • Linear (Default): The existing, classic linear gradient.
    • Radial: Color radiates outward from the Offset point, and the default radius scales to the size of the GuiObject. You can use this to create spotlights, vignettes, and glowing buttons.
    • Conical: Color sweeps clockwise (0° to 360°) around the center. Rotation alters the starting angle. You can use this to create radial progress indicators, color wheels, and sunburst effects.

image (49)
image (49)1308×658 33.9 KB

  1. UIGradient.TileMode: Controls how color fills the space outside the primary gradient boundary. The options are:
    • Clamp (Default): Extends the edge color keypoints across the remaining space. This is the behavior today.
    • Repeat: Repeatedly loops the gradient pattern across the surface.
    • Mirror: Alternates and flips the gradient pattern seamlessly across the surface.

image2
image21999×878 28.8 KB

  1. UIGradient.Scale: A scalar value that adjusts the overall extent of the gradient.
    • For Linear gradient types, it adjusts the distance between keypoint edges.
    • For Radial, it scales the outer color radius.
    • For Conical, it scales the angular sweep extent.

image3
image31662×1116 118 KB

These additions are 100% backward compatible – any existing UIGradients you have in your games will continue to render exactly as expected.

:triangular_ruler: Building Your Own Gradients

Adding upgraded gradients to your UI objects is simple! Check out our sample placefile to follow along and see more complex examples: GradientTestPlace.rbxl (80.1 KB)

Using Explorer & Properties

  1. Under StarterGui, add a ScreenGui and a Frame.
  2. Insert a UIGradient instance directly underneath your Frame.
  3. In the Properties panel for your UIGradient. For this example, let’s explore a radial gradient.
    • Create a color sequence of your liking – click the three dots next to ColorSequence to open the gradient editor.
    • Set Type to Radial.
    • Customize TileMode, Scale, and Rotation if desired – here, they’re left as default.
      image1
      image11080×1140 66.3 KB
  4. Check out your new radial gradient!
    image4
    image4236×246 13.6 KB

UI Styling Example

You can also add gradients directly inside your StyleSheets. If you’re new to our Styling system, check out our documentation here, or watch our tutorial on Youtube!

image9
image9774×1138 48.5 KB

You can also combine these with Styling Transitions to create cool effects! Check out an example here: GradientPlaceWithTransitions.rbxl (67.8 KB)

:memo: Release Notes

  • Avoid using more than 1000 gradients at a time.
  • Gradients with the same color and alpha values are internally deduplicated, regardless of other properties.
  • Animating gradient scale, tile mode, type, offset, rotation is cheaper than animating color or transparency values.
  • Two color gradients or gradients with evenly-spaced color and alpha stops are faster than other gradients.
  • Gradients now interpolate colors in linear space instead of sRGB space for more accurate colors.

:blue_heart: Made with Love

These new UI capabilities were made possible thanks to @jaydubs808, @uiuxartist, and @drranchdressing. While you try out these new capabilities, we’ll be hard at work building more!

As always, drop your feedback, and share screenshots of your new UI designs in the thread below! We can’t wait to see what you build :heart:

394 Likes
2

This topic was automatically opened after 10 minutes.

3

This is a fantastic quality of life improvement for UI creation in Studio.

Radial and conical gradients in particular open up a lot more flexibility for polished interfaces without requiring developers to create and import separate image assets for effects that can now be handled directly through UIGradient.

The new TileMode and Scale controls are also really useful additions. Repeat and Mirror should make it much easier to create more complex patterns, while the additional scaling controls give designers much finer control over how gradients actually behave across different UI elements.

I also really appreciate that these upgrades work with Path2D and remain fully backwards compatible. That makes this feel like a meaningful expansion of the existing UI system rather than something creators need to completely rebuild around.

The performance notes are helpful too, especially the guidance around animation costs and gradient counts. Giving developers both more visual freedom and clearer information about how to use these features efficiently is exactly the kind of Studio improvement I like seeing.

Really looking forward to experimenting with this once the capabilities are available in live experiences. UI on Roblox has come a long way, and additions like this give creators even more room to build interfaces that feel polished, modern, and unique.

26 Likes
4

Holy peak, I’ve been waiting a long time for this one :fire:

Love to see what the UI team cooks next

16 Likes
5

This. we needed this. enough to make a grown man cry bro

12 Likes
6

FINALLY

image
image612×408 39.8 KB

40 Likes
7

18 Likes
8

this is peakkkk! was waiting for radial ui gradients, amazing update :smiley:

4 Likes
9

i genuinely wanna kiss every person who made this possible

16 Likes
10

The UI team has been cooking. This is actually a good update and I can’t wait to see what I can do with this in the future

4 Likes
11

This is really exciting, I was just working on some UI gradients on my project so this is really great news!

3 Likes
12

Amazing, can’t wait to see this come out of beta and be finalized!

4 Likes
14

If you knew just how powerful I’m going to become wielding these, you would run away in terror and hide until the storm blew over.

2 Likes
15

It’s time! 9,000 gradients.

Glad to see UI improvements.

5 Likes
16

Is there any chance we can also get a “Vignette” gradient style in the future? Could see a lot of uses for this especially with it being dynamic to its parent’s size.

8 Likes
17

This is genuinely so huge. So much that can be done with this. We should totally be expecting some cool stuff showing up as this exits beta

2 Likes
18

My only critique is how long it took for UI Gradients to even come around! It’s awesome they’re here now.

Will there be plans for something like Flipbook GUIs for something like Animated effects? Maybe UI Physics / Emitters on screen?

Does UI Gradient Support masking?

3 Likes
19

It has been an incredible year for UI designers, keep em’ comin!

4 Likes
20

we need more updates like this. pretty well and amazing

2 Likes
21

It actually happened
Huge W for everyone who’s left

2 Likes