How to make UI Gaussian Blur

This topic will show you how to make Blurry UI, which can help a lot for beautiful UI design like Microsoft Windows 10 design, MacOs design and many more !
Side note: This method will only show you how to blur In-game material, such as decals, SurfaceGuis but NOT ScreenGui Elements, unless you figure out how to make the camera stare at a SurfaceGui at all times.

Big thanks to Fractality for making the ModularScript, Without the ModularScript I would not be able to make this topic

Original post by Fractality

So when I was playing Nullxiety 2, I came across a level where the camera was above the character and I saw a glass part that blurred everything you could see through it only if the camera was close.
(This is what i’m talking about)

Step 1: So to make blurry UI elements, you will need this modular script

Step 2: put it in StarterGui or in ReplicatedStorage

Edit the ModularScript, Press CTRL + F and type “p0.Material”, You should see a line that says p0.Material = ‘Neon’

Edit the string ‘Neon’ to ‘Glass’

Step 3: Add a frame (or choose a frame you would like to blur) set the border to 0, the BackgroundTransparency value to 0.5 and Background color to fully black or any color of your choice.
Step 4: Make a LocalScript located inside the frame you would like to blur, and type out:

local neon = require(game:GetService(“ReplicatedStorage”):WaitForChild(“neon”))
neon:BindFrame(script.Parent, {
Transparency = 0.98;
BrickColor = BrickColor.new(‘Institutional white’);
})

Step 5: Add a DepthOfField object in Lighting
Put these settings:
Screenshot 2021-05-19 205352

EXTRA:
In the image above, you may have noticed some bleeding around the edges.

image
(MAKE SURE THE LOCALSCRIPT IS IN THE SUBFRAME “BLUR”!)
I recommend adding a subframe, and naming the subframe “Blur”, and making scale offsets to something like -3, Don’t forget to turn off Visible in properties for the subframe! You can also try playing with the DoF settings.


And you’re done!
There will be some bleeding around the edges but you can always modify the DepthOfField settings while playtesting. Tweening, Scaling and positioning works flawlessly too!
Note: Heavily rounded frames (Circles, or ImageFrames that do not have the shape of a square), will not work with this effect. Sadly, I don’t think there is a possible fix for this.
For circle frames (using UICorner), It’s hard to get the exact bounds of the frame, and this is because if the frame is smaller, that means an offset of 2 would make it a full circle. For a bigger frame, it would have a roundness of like 2 pixels.

For quick readers, this doesn’t mean UICorner will not work with this effect! It will still work if you have an offset of 5 or 7.

113 Likes

Wow, Thank you so much.

I’ve been trying to figure out making a UI blur for years, and finally there is one.

Cant wait to play around with this!

8 Likes

Thank you. This is very useful!

1 Like

Oh, that unique never saw that before.

2 Likes

is there a way to remove the outline?

2 Likes

The blurry outline, sort of
You can make a copy of the frame you want to blur, turn off visible property, make it smaller in size then in the script change the frame you want to blur to the hidden one
And also play with the DepthOfField settings, that’ll help too
As of now this is the best solution there is to blurry UI

Any chance you still got this working? Tried implementing it and it doesn’t seem to work anymore, just does some reflection when zooming out. I wonder if the glass material has changed.

The best topic of this year. Thank you!

It didn’t work…
Is it outdated?

2 Likes

Thanks so much! It will be very helpful for my new game!

3 Likes

It works, it’s just extremely specific with the settings, read over the tutorial very carefully

It does indeed work and it loosk very cool!
image

1 Like

not gonna lie i feel bad for people who uses low quality