I haven’t look around the devForums much to see if this is already a thing but I do know that this is a thing but for 3d objects. Also I am posting on this account because I tend to have more credit on this account.
I stumbled upon this while working on a new game and I wanted to a blur UI to blur the Ui elements behind it which was basically impossible but I was able to manage it. I went back to an old project that had this blur effect for 3d objects and this is how I found it. The part is snapped onto the players camera.
Like this:
The smaller part is on the player’s camera.
First I used the neon Part Module that most of the other tutorials used but the material is glass and all its default settings were not touched. (You guys can make it so it is better but I was just testing)
But then I tried it with a surfaceGui with a Imagelabel and this was the outcome:
You could tell that there is a part there and it was blurring out the part that the surfaceGui was on and cutted out the surfaceGui
And here is when I added a the image as a decal to the part, but keep in mind I still had the surfaceGui imagelabel(Since decals get affected by lighting):
The quality and color change of the image is only on the blurred part but the rest of the image is unchanged.
I went further and discovered that this can be also done for other uis like background color and etc.
Here is one where I remove the imageLabel and added a text with a background color of black:
You can see the decal of the old background on the blur and this is when the light switch clicked and I found a plain black UI on the internet and slapped it onto the decal and this was the result:
The middle of the blur part where the text is supposed to be is blurred out but the sides of the blur are bluring the text, so I took the textlabel and brought it into the starterGui with a screengui and took a screenshot of the textlabel making sure to crop out the studio widgets and this is where it gets janky since it has to be near perfect of the surfacegui but for me the surfaceGui is a bit zoomed in so it won’t look as different.
I then upload the screenshot to roblox and plaster it onto the decal and this was the result:
An almost near perfect blur of 1 Ui Element on top of another (also the text size change because when I put the text on the surfacegui it tend to be bigger than in screengui so i just used textscaled to fix this issue).
I also believe that games like Acceleration Flight Simulator does it with their Ui.
Example of a Ui from Acceleration Flight Simulator:
They had the store UI as a screengui and the background was a decal I believe, since a having a surfacegui would be useless since it they were bluring the whole screen instead of a certain portion.
Also if you want a tutorial of the blur in the first place you should check out this tutorial.
Also don’t mind dropping suggestions and the blurpart properties that looks the best.
Edit: Also I don’t know is there is a way for you to tween the frame and still keep its blur but I the only idea that I came up is that you have to test tween it on a screengui and record that tween process and cut everything out except from when the tween started and ended and convert it to a gif and then take that gif and follow this tutorial where it shows how to upload make it look like a video in roblox studios. After doing all that when you tween a element on the surface GUI, you will also run the gif and it should do the job but I am not 100% certain as I haven’t tested this out just yet.
I hope this actually help but this is a lot of steps for just bluring uis and this is super inefficient but until roblox adds a actual blur system for uis we have to work with what we have and exploit loop holes.
Also I tend to be not so active on my devForum since I only come here to see if other people have the same issues as me and check for solutions.
here is my Discord: studs.1 (I will accept friend request dw)