This topic will show you how to achieve a Gaussian blur effect on UI elements, which can help a lot for fluent-like design, present in iOS, macOS and Windows design language.
sidenote: this will only blur 3D space elements, a.k.a. decals, parts and SurfaceGuis. You CAN’T blur ScreenGui elements (e.g. a frame behind another frame), unless you have a surfacegui part move with the camera, just 1-2 studs behind the glass part
thanks to Fractality for making this ModularScript, without it I would not be able to make this tutorial
Original post by Fractality
Step 1: You will need this ModularScript
Step 2: put it in StarterGui / 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 and the BackgroundTransparency value to 0.5
Step 4: Add a LocalScript located inside the frame you would like to blur, and type:
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
Use 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 changing with the DoF settings to minimize the bleeding
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: Very rounded frames (Circles, or ImageFrames that do not have the shape of a square), will not work with this effect. Sadly, I don’t know of a 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.
TLDR; this doesn’t mean UICorner will not work with this effect at all! It will still look good if you have an offset of 5 or 7.
