uGUI: Will there be (or is there) an easy way to blur the background behind a canvas/panel?

Many games blur the background behind ui panels/canvases, but i never found an appropriate way to do this, though it seems so simple.

Would be lovely to have a component that is able to blur the background of a canvas/panel.

Appreciate this forum, thanks for that initiative!

Hello @Sengaya ,

There is no built-in way to blur the background, and it is not in the plans to provide one. But as you said, it is pretty simple to do!

1- Fetch the image you want to blur. In your case, it’s probably the camera view. You can encapsulate that image in a RenderTexture (Target texture field in the camera’s inspector)

2- Create a custom shader (Image Effect shader works well). This shader will have your image as a parameter and will modify its pixels to make it blurry. Usually a blurred pixel is basically an average of its color and the colors around it. There are multiple shaders online you can take inspiration from, but be sure it’s compatible depending on which render pipeline you are using.

3- In your UI, create a Raw Image. Assign it your texture + a material with your new shader.

Hope this helps!

1 Like

Hi Roxanne, thank you very much for your answer :slight_smile:

I will definitely try this, though it really sounds too easy to be true if i’m honest ^^

Thanks again and have a great day!