How to blur the Canvas in URP

, ,

For the project I’m working on (all in Canvas) we need to create a blur effect.

This without the URP is actually easy, but now I have to make it work with URP cause it will be needed for other things, and now I’m going crazy.

Every thing I find is:

  • old and doesn’t work with actual URP
  • doesn’t use URP at all
  • works only outside of the Canvas (or ignore the Canvas)

Please, tell me that I can do it in some way

Do you want to blur the entire UI, or create some glass UI effect that blurs the background of the panel?

In the first case, you could add a camera to render the canvas instead of overlay mode, and apply postprocessing effects.

One way i did this before was by :

  • Make custom pass or post-processing effect that gets called after Transparent queue
  • Copy the color buffer from the camera into another texture (let’s call it _GlobalColor)
  • Set your texture as a global texture
  • Create a shader , and sample the color from _GlobalColor using normalized screen position (basically screen position divided by screen size)
  • Use that shader for the material that you put on your UI
  • Done