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:
EXTRA:
In the image above, you may have noticed some bleeding around the edges.
(MAKE SURE THE LOCALSCRIPT IS IN THE SUBFRAME “BLUR”!)
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.
