BlurUI - Blur Your UIs! [VERSION 1.1]

Hey everyone!


Roblox currently does not allow you to apply a effective and good looking blur to UIs on your screen, this module fixes that with a clean and simple API!

How Its Done

BlurUI uses @TheNexusAvenger’s heavily modified by me version of Module3D, to create a billboard GUI that is placed in front of the camera. The module allows you to place frames onto this billboard GUI, which can then be blurred through the blur effect.

API/How To Use

  • Grab the module here!
  • Place the module wherever you would like, preferably ReplicatedStorage.
    BlurUI1
  • Add a blur effect to lighting.
    BlurUI2
Module.Init(ScreenGui) -- Creates the billboard GUI and sets up events. Required for the module to run.
Module.AddFrame(Frame) -- Clones given frame and parents to billboard GUI, given frame is set invisible.
Module.RemoveFrame(Frame) -- Removes cloned frame, frame given MUST be original frame.
Module.Destroy() -- Destroys billboard gui, removes all current frames and shuts down connections.
Example
wait(5) -- Wait for the module to load.

local Module = require(game.ReplicatedStorage.BlurUI) -- Require the module.

Module.Init(script.Parent.ScreenGui) -- Initalize the module, make sure to send a screenGUI!

Module.AddFrame(script.Parent.ScreenGui.TextButton) -- Add a button!

Module.RemoveFrame(script.Parent.ScreenGui.TextButton) -- uh oh we dont want that button anymore, send the original button!

Module.Destroy() -- shuts down all connections!

Update Log

Its recommended you check back here often to make sure your module is up to date!

  • Update 1.1 (June 10th, 2021)
    • Updating function runs when the camera moves, helping improve performance for standing still cameras!
    • Removed unnecessary parts.
    • Changed from SetPrimaryPartCFrame to normal .CFrame!
    • UI now updates as camera viewport size changes.
    • Fixed jittery issues.
    • Fixed luau type check error in WaitModule.

Caveats

  • UI disappearing behind objects can’t be fixed, its recommended that this is used for still cameras.
  • UI being slightly discolored can’t be fixed.
  • GUI can not be pressed or interacted with, this is very hard to fix.
  • Scripts may break when they are cloned.

Extra

  • If you have any feedback, concerns, questions or advice. Please feel free to message me here on the developer forums or reply down below!
  • Credit to @TheNexusAvenger & @Maximum_ADHD for Module3D, and @LuaBearyGood for the WaitModule.

Support

  • If you want to support me and this script, leave a like on this post and follow me on twitter! That’d be greatly appreciated!
  • You can also check out my other open source script here!
53 Likes

Set LightInfluence to 0

Place the SurfaceGui/BillboardGui in PlayerGui and set the Adornee to where it needs to be.

1 Like

roblox needs to add a “UIBlur” object that has a ZIndex property so it can be done without having to use hacky methods. I’m pretty sure something similar exists and is somewhat functional as iirc core scripts put a blur on top of all UI elements for disconnected/kicked messages (if this is even handled in core scripts).

8 Likes

Already done, still discolored.

Not what I meant.

Probably, but we don’t have access to that. So this is the next best option.

1 Like

New Update!

  • Updating function runs when the camera moves, helping improve performance for standing still cameras!
  • Removed unnecessary parts.
  • Changed from SetPrimaryPartCFrame to normal .CFrame!
  • UI now updates as camera viewport size changes.
  • Fixed jittery issues.
  • Fixed luau type check error in WaitModule.

Make sure to update your module!

2 Likes

This looks nice, but can you make it so it wont blur the entire screen? I’m looking for something that blurs a certain frame, not the entire screen.

1 Like

not possible right now I’m afraid!

1 Like

Actually it is possible, through an old module created by Fractality.

While this module by default creates neon parts onto GUIs, you can fork some code in the module and make some hacky changes to lighting to output an effect similar to blurring.

That tutorial I found is by far the closest anyone will get to making blurred UI.

4 Likes

I dont think this works anymore. When I tried using it, it made my UI disappear

It works, it just occasionally moves your UI offscreen.
(or im just an idiot and accidentally moved my ui but roblox doesn’t let you drag ui offscreen so idk)

1 Like

How could I make a normal GUI show behind the blurred UI?

Having issues using this with UITextSizeConstraints It still include them in the BillboardGUI but appears to not be working after its added.

1 Like
  • Lighting Mode Compatibility
  • Ambient, ColorShift: Bottom and Top Color3.new(255, 255, 255)
  • Brightness 2