Hi,
I created a topic called “Shape blurring the rest of the app”, but I didn’t get a “solution” answer. So I guess it’s an idea!
My idea: Add a blur option to Shapes and Groups that blur things under them.
I really hope it’s possible!
Regards,
BOITE
Big thumbs up from me - it would be so useful to have the ability to blur the background of a shape, in the same way that the whole page can blur when using a popup.
Just add CSS to a code widget
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);Can you specify how to do that more precisely? Need to do it.
A way few to go about this. The easiest way is to expose the ID (via your app settings) and then add a HTML block and add the custom CSS defined above.
I have a post that covers the process, you’ll just need to add the custom CSS above…
Having a ‘Blur’ option available on groups (and possibly shapes) would be handy, just for convenience really, although I can understand its not as widely used as drop-shadowing.
For images we can of course use Imgix to process and apply a blur:
i did not get how to you apply the blur… could you please simplify it step by step. i am a new bubbler
Sure.
So I’m referring the to the Imgix built in options that are available, but this is only with image elements that use a dynamic image. So if you are using a static image, you will not be able to use the processing options unfortunately. Maybe something Bubble should look at integrating, as it would be handy.
Anyhow, here is an example:
Add an image element to the page. As mentioned, you’ll need to use a dynamic image. So here I have a data type for slideshow image:
Once you have the image pointed to, you can then click the more to expand on this expression further. Within the list, you’ll want to use the :processed with Imgix
You can then access the options, one of which is the blur.
Just note, that the image in the dynamic expression needs to be hosted on Bubble’s server (Amazon S3) e.g. not Box or externally hosted.
Hope this clears it up.
@luke2 I’ve been searching for more information on how to do this but can’t seem to find it anywhere. Hoping you might shed some light as I’ve seen you indicate this is possible in a couple of threads.
Right now I want to have a floating group with a black background color that has 50% transparency.
I have used CSS tools in the past, but not very versatile with it. Could you provide a quick example of how to use the CSS tools plugin or the HTML element to reference a group or floating group using the id attribute in the code necessary.
I’m confused on whether I need to just use the HTML element or should I be using the CSS tools plugins…and with either of these I still can’t figure out what the code should be. I spent some time checking out this site:
https://www.w3schools.com/howto/howto_css_blurred_background.asp
but still come up short in my attempts.
Cheers
Turns out that the darkened background of the popup is a <div> with class “greyout”. So you can simply add this code inside an HTML element anywhere in the page to get what you want:
<style>
div.greyout {
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
</style>
Here’s what I get on chrome:
Note that according to the MDN web docs, this will not work with internet explorer.
Nice!
Just be aware that if you’re making a responsive design, putting elements over each other can give weird results. 
Thank you for the screenshots, very helpful!
