# \[New Plugin\] Glass Effect Plugin

**URL:** <https://forum.bubble.io/t/new-plugin-glass-effect-plugin/215594>\
**Category:** Showcase\
**Created:** [July 15, 2022, 8:36am UTC](https://forum.bubble.io/t/new-plugin-glass-effect-plugin/215594 "2022-07-15T08:36:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bildungsreformjetzt](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bildungsreformjetzt/32/138230_2.png) [@bildungsreformjetzt](https://forum.bubble.io/u/bildungsreformjetzt)\
**Post date:** [July 15, 2022, 8:36am UTC](https://forum.bubble.io/t/new-plugin-glass-effect-plugin/215594/1 "2022-07-15T08:36:01Z")

</div>

Hi Everyone

With this plugin you are able to create the glass effect and assign to elements according to their ID attribute.

[![](https://cdn.dribbble.com/users/3967258/screenshots/14647209/media/d6905571f5821097b3dcc631ef08365b.png?compress=1&resize=790x590) ](https://cdn.dribbble.com/users/3967258/screenshots/14647209/media/d6905571f5821097b3dcc631ef08365b.png?compress=1&resize=790x590)

How to use it:

- Turn on the Attribute ID in your page settings
- Assign IDs to the elements you want to apply the effect
- On page load: insert the _Glassify_ action to toggle the style of the group element

🔌 [Source code](https://bubble.io/plugin_editor?id=1655380104541x186826171467431940)  
👀 [Preview](http://glasseffect-application.bubbleapps.io/version-test/index?debug_mode=true)  
📄 [Implementation page](https://bubble.io/page?id=glasseffect-application)  
✨ [Plugin page](https://bubble.io/plugin/cards-stack-deck-1657110145930x934549118168596500)

Happy building!  
Gabriel Cardoso  
Media Nova, 2022

---

<div class="post-metadata">

**Author:** ![alan.mackintosh1](https://avatars.discourse-cdn.com/v4/letter/a/439d5e/32.png) [@alan.mackintosh1](https://forum.bubble.io/u/alan.mackintosh1)\
**Post date:** [July 25, 2022, 3:00pm UTC](https://forum.bubble.io/t/new-plugin-glass-effect-plugin/215594/2 "2022-07-25T15:00:36Z")

</div>

Hi,

I like this plugin a lot, however it isn’t working when I test on an iPhone. On android it works completely as expected, but on iphone it over-writes the colours as expected but doesn’t blur. Are you able to help please?

---

<div class="post-metadata">

**Author:** ![bildungsreformjetzt](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bildungsreformjetzt/32/138230_2.png) [@bildungsreformjetzt](https://forum.bubble.io/u/bildungsreformjetzt)\
**Post date:** [July 25, 2022, 4:26pm UTC](https://forum.bubble.io/t/new-plugin-glass-effect-plugin/215594/3 "2022-07-25T16:26:33Z")

</div>

Hi Alan,  
Thank you for using our plugins!  
Could you please provide the name and if possible the version of the browser you are using on the iPhone?

Best regards  
Gabriel C.  
MediaNova

---

<div class="post-metadata">

**Author:** ![alan.mackintosh1](https://avatars.discourse-cdn.com/v4/letter/a/439d5e/32.png) [@alan.mackintosh1](https://forum.bubble.io/u/alan.mackintosh1)\
**Post date:** [July 26, 2022, 9:08am UTC](https://forum.bubble.io/t/new-plugin-glass-effect-plugin/215594/4 "2022-07-26T09:08:37Z")

</div>

Hi,

I’m testing it via the BDK Native app as we will be wrapping the app, however it behaves the same way in safari on iOS 15.5.

Thanks  
Alan

---

<div class="post-metadata">

**Author:** ![bildungsreformjetzt](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bildungsreformjetzt/32/138230_2.png) [@bildungsreformjetzt](https://forum.bubble.io/u/bildungsreformjetzt)\
**Post date:** [July 28, 2022, 8:58am UTC](https://forum.bubble.io/t/new-plugin-glass-effect-plugin/215594/5 "2022-07-28T08:58:45Z")

</div>

Hi Alan,

For safari we included a fallback to webkit-backdrop-filter. Which is the CSS rule responsible for blurring the background. Safari uses a CSS called webkit-backdrop-filter instead of the backdrop-filter.  
[https://caniuse.com/?search=-webkit-backdrop-filter](https://caniuse.com/?search=-webkit-backdrop-filter)

[Live Browser on Safari 9.1](https://live.browserstack.com/dashboard#os=OS+X&os_version=El+Capitan&browser=Safari&browser_version=9.1.1+techpreview&zoom_to_fit=true&full_screen=true&resolution=responsive-mode&url=favorites%3A%2F%2F&speed=1)

The supported Safaris need a webkit to run this rule. I am not sure how BDK works, but you might need to build and include webkit as dependency? I am not sure.

Best regards  
Gabriel C.  
MediaNova 2022

---

<div class="post-metadata">

**Author:** ![alan.mackintosh1](https://avatars.discourse-cdn.com/v4/letter/a/439d5e/32.png) [@alan.mackintosh1](https://forum.bubble.io/u/alan.mackintosh1)\
**Post date:** [July 28, 2022, 10:30am UTC](https://forum.bubble.io/t/new-plugin-glass-effect-plugin/215594/6 "2022-07-28T10:30:15Z")

</div>

Hi,

How would I go about adding a webkit, is something I can do in bubble or does it need done externally?

Thanks  
Alan