[Full Release] UI Styling is officially released!

It would be great if they added styles to Gradient in the future.
Good update.

3 Likes

It sure is a wonder how despite GUI being one the most fundamental aspects of game development, it is arguably one of the most underdeveloped things on this engine.

I appreciate styling as it helps with the workflow of formatting and designing GUI, but it is still unfortunately built on the existing dated GUI system. There are countless bugs and quirks that have to be worked around with so many GUI instance types that the length of this message would be drastically inflated if I listed them all. Most notably would be CanvasGroups being entirely unusable for various reasons.

I’d love to receive any sort of substantial update which allows creators to make more dynamic and stylized GUI. I personally would love to have the ability to make GUI with animated textures. Roblox doesn’t have built in support for making stylized rendered frame animations like other game engines. Currently, the only way to make texture animations is by using sprite sheets, but due to Roblox’s resolution limit of 1024x1024, sprite sheets for larger textures look incredibly low quality.

One thing I’ve always wanted to make is something similar to the very stylized water backdrop seen in the pause menu of Persona 3 Reload, but making something like that is not currently possible with the Roblox engine. Theoretically, (with 2 grains of salt) you could use editable image and/or some crazy viewport frame tricks to maybe achieve something like animated textures, but I don’t know how practical or possible that even is.

Additionally, there are still no advanced customization features for UI. Some have mentioned UI Blur and UI drop shadows, but there are much more things that could be added. UI Materials (like apple’s Liquid Glass), Clipping Masks, UI Particles, Viewport Frames that aren’t limited to just rendering BaseParts, Blending Modes, Grain/Noise, GUI Color Filters (I made a feature request for this), and many more.

I would also greatly appreciate any sort of No-Code way to create animations. It becomes quite a chore having to write and rewrite tween scripts for every variation of button I create. Built in GUIInstance functions like :SetAnimation() and :PlayAnimation(), as well as custom animation properties would be very useful for this purpose.

5 Likes

I guess I should finally learn how to use these with React lol

1 Like

We’ve updated the place so you can open it in Studio!

4 Likes

This has been updated so you can open it in Studio!

2 Likes

Why do they have this button here?

I don’t see this button?

2 Likes

Tag Name only support english? When can other languages be supported
image

Is it intentional that you can only set one theme at a time in the editor? The accessibility color scheme and touch layout can be enabled in-game at the same time but not in Studio.

You can only have 1 type of theme active at one time, but you can have multiple types of themes. For example, you can have an active color theme, font theme, and size theme all active at the same time. But you can’t have 2 color themes active at once.

@HealthyKarl can you clarify which folders you would like to select and your use case? We usually recommend placing StyleSheets in ReplicatedStorage so that they are not copied into each PlayerGui.

For Plugin workflows, we now support viewing StyleSheets in Plugin directories. The dropdown to toggle the StyleSheet source automatically appears when you have some Plugins that are in PluginDebugService.

I am currently writing a Feature Request, that will talk more about a similar topic.

 

Do not replicate? I am confused?

 

“Design” is just a thing with :GetChildren() or similar. So I expect everything to substitute “Design”.

 

Ah, I never turn that on that much because it almost makes everything appear in there, while I just wanted one Plugin and not everything.

Sometimes the actual stuff that I want doesn’t even appear in there.

I can’t have the other types of themes enabled while in Studio. I can’t have a color, font or size theme active at the same time in studio. In the video, the colour scheme is changed. The moment I go to change a different type of theme (fonts or layout) using the editor, the StyleDerive for the color scheme is replaced.

This doesn’t happen using a script to change any of the themes. I can set multiple different types of themes. (Size, colors, layout etc)

This makes editing the UI challenging, especially if I can’t preview what different mix and match options look like (ie; Mobile + Accessibility + Large) without manually scripting and testing.

Ah I edited my previous post, but just wanted to clarify that your feature request is for using other folders in ReplicatedStorage and not using StyleSheets in other service such as StarterGui?

The Style Editor should currently use any folder that existing StyleSheets are parented under in ReplicatedStorage. So if you rename the Design folder to something else or make another folder with StyleSheets, it should also put any new StyleSheets in that folder. Are you currently experiencing bugs with this behavior or are you expecting a different behavior?

Style Editor scans for a Design folder

I want to be able to set the Style Editor’s location that it should scan.

Hi there thanks for pointing this out! Revisiting the example file you are correct, some of the theme swapping is done via scripting which is why the Editor doesn’t swap themes as expected during edit mode. The file was meant to show a very complex example of how styling could also handle input changes, which currently does require some scripting. In a less complex example, you would be able to swap these themes in the Editor as expected. But we are working on ways to make this all work better during edit mode!

1 Like

I’ve been using this feature for the past few months and it is a genuine game changer. Thank you to everyone who worked on this feature!

My only complaint is that :Hover compared to css for example, works differently since clicking on the object changes its GuiState to :Press while technically still hovered above. For my case I’d have to write stuff like “TextButton:Hover > ImageLabel, TextButton:Press > ImageLabel” a-lot and it’s quite tiring

On a side note, is there any plans to be able to organize tags in separate folders? I have like a crap ton of tags (~100 on the surface at this point) and it looks quite messy :sweat_smile:

Lastly, any plans to be able to use tokens in Text objects with rich text on?
For my case, I color the text using which is a bit iffy for the case of consistency with themes, being able to do would be nice

1 Like

No way roblox is adding it, too good to be true. It just appeared on update 2026-03-02

1 Like

Yo, it would be so great if I could “Remove Tag” without it removing like .SubTag as well if I want to apply .SubSubTag while .SubTag2 was already applied. It just removes stuff that I don’t want it to remove.

:confused: