How to add blur (or add other effects) to elements under/behind another

I have seen in videos that you were able to create a menu that blurred everything under it. How can this be achieved?

I would like to create a popup that has slighty transparent background and everything under it is blurred.

Hi! Yeah, we love those effects :slight_smile:

So far we have not released any standard library effect for doing this. This is because effects like this are extremely performance critical, and we are still working on optimizing the rendering paths to make sure such effects can be pulled of in stable 60FPS with acceptable power consumption.

When we are done, we will probably publish this as an effect called <Glass> which can be put on any element.

However, as I know you are quite good at writing your own Uno effects, there is nothing stopping you from creating this effect yourself for now.

The trick to getting the background image into a texture is to use the method called Element.CaptureRegion(). You do a CaptureRegion() on the background layer, and then you can e.g. blur that and composit it on top from the foreground layer.

Ah I see, thanks for the pointer. In my case everything is still when this burring occures so it should not feel bad at all :slight_smile:

Are there any news on the glass filter?

No, currently there are no news on that.