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 =‘Institutional white’);

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

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

I recommend adding a subframe, and naming the subframe “Blur”, and setting both 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.


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!


Thank you. This is very useful!

1 Like

Oh, that unique never saw that before.


is there a way to remove the outline?


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?


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


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!

1 Like

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


Position Scale,Offset -3 or Size or both?

modify only the offset /////////

1 Like

( Sorry for bump )

Is this outdated or something? I’ve followed the instructions clearly, and there are no warnings or anything.

I have all the right settings and I don’t know what could be causing this.

If anyone is nice enough to give me a place file or something, it’d be appreciated!

You might be using low graphics quality, but if that’s not the issue, you can try this.


1 Like

this is great and all but the sun reflects off of the glass part, is there any way to get around this?

You would need to make your game’s lighting look horrible for it to go away, so I don’t think so.