UI Toolkit Blurred Background - Fast translucent background image

Links: Manual

Blurred backgrounds for UI Toolkit elements.

Nicely blurred see-through UI for everyone.

✔️ Super easy to use

Adds a new visual element to your component library. No setup or coding required.

✔️ Works on all render pipelines

Built-In, URP and HDRP are supported

✔️ Examples included

Go to Kamgam/UIToolkitBlurredBackground/Examples to open the demo scene.

✔️ Mobile ready

Multiple quality settings so you can adapt it to your needs.

✔️ Full source code included

I publish this asset with full source code because as a developer I know how annoying it is to not have source code access. If you like it then please remind others to purchase the plugin. Don't just copy and paste it everywhere. Thank you ❤️

✔️ Supports Unity 2021.2+, 2022, 2023 ... LTS

Things you should know (👓 please read this before you buy)

There is a manual with lots of screenshots. Please read it before using the asset.

⚠️ This is NOT a UGUI or IMGUI asset. This is for the new UI Toolkit.

⚠️ You need Unity 2021.2 or higher.

⚠️ At the moment there is only one global blur strength setting. This means that all blurred backgrounds will have the same blur strength. If you need more please let me know. If demand is high enough it will be added.

⚠️ No UI over UI blur, only scene contents are blurred.

⚠️ No anti-aliasing for rounded corners. It's a UIToolkit limitation, hopefully they will patch it some day.

⚠️ Built-In render pipeline will add a script component to your cameras to hook into the render process to generate the blurred image. The component is not saved in the scene. It will be created at runtime if needed.

⚠️ It assumes forward rendering. If you are using deferred rendering then it may not work (it's untested on deferred renderers).

⚠️ URP 2D projects are not officially supported (if you are using the Universal Render Pipeline with the 2D Renderer). It worked in some test scenarios but it was not broadly tested. Notice: normal URP projects are fully supported.

✍️ Usage

1) Open the UI Builder Window

2) Add a new UIToolkitBlurredBackground element from the Library > Project > Kamgam section.

3) Done. No further setup is needed. It behaves just like any normal visual element.

😎 HINT 1:

The blurred background is drawn ON TOP of your regular background. Use alpha on the tint in combination with a bright background color to simulate some semi-transparent white glass.

🧐 HINT 2:

Try a low resolution for your highly blurred backgrounds. Doing that you can save some resources. Better spend those fps elsewhere!

🤠 HINT 3:

If you want to disable the blur completely then set the blur iterations or the blur strength to 0. This will disable the effect.

🤓 HINT 4:

Keep the "Blur Iterations" as low as possible (1 is ideal). Iterations can increase the quality by but they are also the most expensive setting you can use. Better use that quality settings instead.

🤫 HINT 5:

The blur is rendered (extracted) once per frame from your already rendered color buffer. This means it has very little overhead and it does not matter how big your blurred UI is.

☎️ Support

If you have any questions please write to office[at]kamgam.com. Please be patient, replies may take a few days. Please include your Asset Store Order Nr and Unity version in your request. Thank you.

❤️ If you like this asset then maybe you'll like these too:

📄 UI Toolkit Script Components

Link script components to your UI

✂ Mesh Extractor

Separate your assets into useful parts within seconds.

⚙ Settings UI Generator

One Settings UI + API for all render pipelines.