How do I apply Gaussian Blur to a card background?

I’ve created a modal type of component. It has a background (card) that I stretch across the entire display and adjust the opacity to make it hard to see what’s behind the actual modal. This works great, but i’d like to also blur the background. This has a ‘gaussian blur’ dropdown, but it’s grayed out. Is there any way to enable this? Should I be using something other than ‘card’ for my background element?



Hi, unfortunately the gaussian blur is not available for vector shapes. Gaussian blur was used to another product of ours which has the same codebase so I’m not 100% sure if it is available even for images in React Studio.

Thanks. That’s too bad. I’m able to get the desired effect by forcing this into the card div’s style:

style_elXmlModalBackground_outer.backdropFilter = ‘blur(8px)’;

But this is a terrible hack. And this particular hack requires that I know the name of the component assigned by the user. Is there a variable that contains that name that I can access from inside the getReactWebRenderMethodSetupCode of my plugin? Otherwise this will only work for the instance of the component i’m testing (XMLModal). Thanks very much for your help.