# compose

Travis Griggs

10/27/2023, 3:11 PM
In iOS, you can use a VisualEffectsBlurView (or something like that) to put a blurry mask between some content and the content below. I was trying to do this in a PopUp to get the same effect, a floating text that sort of blurs what's below it. But the blur() Modifier just seems to blur the content of the local composable, not what might be generally drawn under it. Is there a way to achieve something like that?

Sergey Y.

10/27/2023, 6:53 PM
I had the same problem some time ago. I wanted to create a blurry mask between some content and the content below it, like in iOS. However, the blur() modifier in Compose works differently. It only blurs the content of the composable it is applied to, not what is drawn under it. To achieve something similar to iOS, I tried to use RenderNode in combination with RenderBlurEffect. I needed to specify a clipping mask bounds where the blur would be applied. But I failed, because at that time I did not find any suitable public API in Compose graphics layer to set my RenderNode instead of the standard one. I hope this helps you with the direction. If you find a solution, please share it with me 😄