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
Great tip!