How to blur the Canvas in URP

Questions & Answers
, ,
1

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

2

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.

3

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