How to add a Glassmorphism effect to your Bubble app using 6 lines of CSS code

Let’s start the new year with a nice little design hack for Bubble: Glassmorphism. Or as I like to call it: “Blurred see-through things”.

Glassmorphism has become a standard tool in every designer’s toolbox. However, Bubble does not yet support this natively. But no worries, you can create a Glassmorphism effect with six simple lines of CSS codes.

1) Set the opacity of the element you want to apply the effect on to something like 40%.

2) Give the element an ID Attribute (make sure to enable Settings / General → Expose the option to add an ID attribute to HTML elements).

Add an HTML element to your page and add the following code:
<style>

#blur {

-webkit-backdrop-filter: blur(10px);

backdrop-filter: blur(10px);

}

</style>

Make sure that your ID Attribute added in step 2 is the same as the one in your CSS code (after the #). Play with the numbers to increase or decrease the strength of the effect.

That’s it, enjoy. Feel free to have a look at my Bubble editor setup.

Note: To see the effect, you need to preview the page. It won’t be visible in the Bubble editor itself.

Join the discussion

Do you want me to write about a specific topic, or do you have an awesome Bubble hack you would like to share? I'd love to hear from you, and I'm looking forward to engaging on Twitter (@DamianJanzi), in the post comments, or the Bubble forum. 

Also, if you like this newsletter, why not forward it to a friend :)

That’s it. Keep it simple!

Damian

👉 twitter.com/DamianJanzi

👉 bubblehacks.io