UI Acrylic Glass/Postprocessing blur on CanvasGroups + images

[pyxfluff (Pyx)]

As a Roblox developer, it’s currently impossible to create UI Acrylic.

UI Acrylic is currently impossible and unsupported by the Roblox engine.
For anybody wondering:

This is UI Acrylic for people who dont know.

This looks amazing for all UI, it’s crazy we still do not have this.

One possible workaround is using a module from 2015 to create four parts closely to the back of a semi transparent UI frame and using DoF to create this:

It works with UICorners and tweening works totally fine @ 60+ FPS.

Use Cases:

• Better readability for transparent frames
• Better looking UI all around
• More customization

Back in 2019 we essentially got “no because it hurts low end phones too much”. Nowadays this is a totally unreasonable excuse because both Android and iPhone have great chips even on the budget side. Running Roblox on a $300 Android is totally possible and works well in most games.

Blur Effects for UI Elements

This is something we’d really like to ship but it’s complex because UI is laid overtop of the game content which is changing at 60 FPS. As well, we generally prefer UI features that you can animate at 60 FPS without tanking performance. The big issue here is that on low end phones, doing a blur is quite expensive, and having a “low quality” version isn’t simple because a blur is essentially a low-pass filter on the image, which removes noisy parts that can make text overlaid on top harder to rea…

Ideas for it:

• It could be a property of frames/CanvasGroups or another instance (UIBlurEffect) which you add to an ImageLabel, Frame, or CanvasGroup.
• You can control the strength of it

If Roblox is able to address this issue, it would improve my development experience because we would be able to create Acrylic backgrounds, making all UI in general look better.

[local_ip (jmk)]

@pyxfluff

Currently the only solution is to create a neon part in a ViewportFrame, position the camera right in front of it, and then you have acrylic glass.

What are you trying to demonstrate here? If this doesn’t achieve the desired effect, why is it a solution?

@pyxfluff

This is UI Acrylic, making it easier

It would not make it easier, in practice it’s the same thing.

[pyxfluff (Pyx)]

@local_ip

f this doesn’t achieve the desired effect, why is it a solution?

Some people have managed to make it look good, but I cant replicate it no matter what I do.

@local_ip

It would not make it easier, in practice it’s the same thing.

I will remove that

[Ethanthegrand14 (Ethanthegrand)]

Needed to bump this. This is a really desirable effect to have for UI. The Acrylic Glass effect in UI is a beautiful and underrated effect that most people just take for granted, and a feature that roblox has been lacking for awhile now.

Having this in roblox would open up doors for more UI design work on roblox, and would honestly make transparency-based UI look really nice in games, and even plugin UI.

---

---

This is a feature I have been needing in roblox for many years.

[Ethanthegrand14 (Ethanthegrand)]

Bump. We still don’t have a nice and proper way of doing this without issues or artefacts or using DepthOfField. This is still a very useful and needed UI effect that we would all love to see!

[computerph1_DEV]

@pyxfluff

I dont think this would be supported on mobile

css can do it in mobile so it’s possible

[AlureonTime (Alu)]

Bump.

This would be a unique feature without having to use expensive a work around.

Currently as it stands, we have to use an expensive lighting feature to achieve this desired effect.

[styleqretz (balding)]

Bump
Need this so bad and wouldn’t affect mobile performance that much tbh

[pyxfluff (Pyx)]

Gonna point out that “no because it hurts low end phones too much” was used as an excuse back in 2019. Literally all relatively modern phones run great and it should not be up to Roblox to decide how we optimize our games with a feature like this or UI postprocessing effects. That was used an excuse 5 years ago now believe it or not - it’s time for a change. I’ll update the post soon to not be 2 years old

[computerph1_DEV]

now they can’t use any excuses since they brought future lighting to android

[Im_Andr3i]

Ui Blur or Ui Acrylic Glass won’t hurt iOS and iPadOS devices, they have been using blur on there for years and it would be nice if Roblox finally adds that kind of option on Roblox user interfaces.

[DanWasTakenAltt (Dandoesstuff)]

bumping this. this would be a great feature for UI designers!

[computerph1_DEV]

I guess we need a UI Quality slider now , if roblox want to support old high end devices from 2009

[leoburk (CannedWither)]

Bump
(I dont know why this hasn’t been added yet)