Blurry UI in Roblox tutorial

blurryui.md

How to make Blurry UI in Roblox

Introduction:

• So you might know those blurry UI often used to make design more beautiful and minimalistic, and you want to somehow achieve this effect in Roblox.
  • Ex:
    
    
    

Well, it is infact possible to do it, and it is very simple.
So let's begin with the tutorial!

---

placeholder text cause markdown broken please ignore

Credits

Before continuing with the tutorial, thanks to Fractality's post on this which you can find here.

Tutorial

1. Get this ModuleScript by Fractality here.
2. Put the ModuleScript inside of StarterGui (or you can directly put it in a frame for easier use) or ReplicatedStorage
3. Edit the "neon" ModuleScript and press Ctrl + Shift + F, then search for p0.Material. You should see a line that says p0.Material = 'Neon'
   
4. Change 'Neon' to 'Glass'
   
5. Add a frame you want it to have the blur effect.
6. Insert a LocalScript into the frame and paste this:

local neon = require() -- location of the 'neon' ModuleScript
neon:BindFrame(script.Parent, {
Transparency = 0.98;
BrickColor = BrickColor.new('Institutional white'); -- You can change whatever color you want
})

​ - I recommend adding a subframe into the frame you want to blur and add the LocalScript you just made in it. (don't forget to turn off Visible for the subframe) 7. Add DepthOfField into Lighting and change it to this settings:
(it can have a blurry outline on the UI, but you can fix it by tweaking DoF settings)

Note:

• Tweening, Scaling and positioning works
• Only works with 8+ quality
• Heavily rounded frames (Circles, or ImageFrames that do not have the shape of a square), will not work with this effect.
• 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.