How do I create this blur effect in GUI?

,

Dear Devforum members,
I am a UI designer creating UI since 2017 and I am currently making a new design in ROBLOX inspired by Microsoft’s Fluent Design which features a blurred background.

The problem is I do not want to use Neon parts for blurring it. I have seen someone made blurred background in ROBLOX.

If you don’t understand what I am saying, take a look of the picture:
image

If you know how to make this, please tell me. Thank you :slight_smile:

Best regards,
ManamiWasThere

5 Likes

Unfortunately, you can’t use blur on ScreenGuis. I believe the only approach to this would be having to use neon parts or making a blurred image with Photoshop.

This post might be helpful.

2 Likes

Unfortunately , I do believe I seen someone blur on screengui without using neon parts

2 Likes

It’s pretty much one of the only ways to create the effect you’re looking for, you probably wouldn’t notice the neon parts since they’re usually scaled to a relatively small size and placed directly in front of the camera.

1 Like


What I found ^

1 Like

Would it work if I am making the frame draggable?

1 Like

You could by CFraming the parts on every frame but there probably is a better way to achieve the desired effect I myself don’t know about.

1 Like

I tried using a viewportframe and a neon part, didn’t work for me, maybe it will for you. However I found that using glass material and messing with the reflectiveness & transparency can give off a nice glass overlay effect.

2 Likes

I’ll try that method, thank you.

1 Like

I know I’m late, but maybe you could add the Blur to the Camera (local of course), and adjust it when needed.

Pros: Gives you a dynamic-blur.
Cons: Blur is on the whole screen, and is not a GUI.
(Won’t blur GUIs, but you can add transparency to the GUI to make it look somewhat blurry too.
However, if you’re just looking for a blurry background, then I’d definitely go for the “BlurEffect”)

3 Likes

I think you can blur it by making a separate blurred image in Photoshop that has a transparent background (By that I mean no background at all, no colors etc…) and then just make an image label and just scale it the size you want.
For more info please reply to this reply!
Edit: Sorry for the late reply!

2 Likes

That was my first Idea when trying to achieve this but I can’t figure out how to do this with gimp. If you could elaborate that would be useful.

EDIT: Sorry for asking this even though it was 5 months ago.

Never mind! Just make a script that adds more blur from the lighting service.
Idea: Whenever the player clicks a certain button, the game adds more blur.

One way is to keep A BlurEffect in Lighting and change it to Enabled when you want it to be enabled.

No, you can’t blur only part of the screen. You can only blur the whole screen (with a BlurEffect). But there are several feature requests for this:




You can give them all a heart so that it’s more likely for Roblox to add this

1 Like

Actually, I’ve found a way which is with the use of viewportframe and glass

Really? Can you tell me how?