Search Unity

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

Discussion in 'UGUI & TextMesh Pro' started by Sengaya, Aug 26, 2022.

  1. Sengaya

    Sengaya

    Joined:
    Nov 21, 2018
    Posts:
    9
    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!
     
  2. RoxanneUnity

    RoxanneUnity

    Unity Technologies

    Joined:
    May 17, 2022
    Posts:
    7
    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!
     
    Cakebox likes this.
  3. Sengaya

    Sengaya

    Joined:
    Nov 21, 2018
    Posts:
    9
    Hi Roxanne, thank you very much for your answer :)

    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!