bubbleHacks

Share this post
How to add a Glassmorphism effect to your Bubble app using 6 lines of CSS code
bubblehacks.substack.com

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

Damian
Jan 1, 2022
4
1
Share this post
How to add a Glassmorphism effect to your Bubble app using 6 lines of CSS code
bubblehacks.substack.com

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

Leave a comment

Thanks for reading bubbleHacks! Subscribe for free to receive new posts and support my work.

1
Share this post
How to add a Glassmorphism effect to your Bubble app using 6 lines of CSS code
bubblehacks.substack.com
1 Comment
Louis Pereira
Writes Complexity Condensed
Jan 1, 2022Liked by Damian

Great tip!

Expand full comment
ReplyCollapse
TopNewCommunity

No posts

Ready for more?

© 2023 Damian Janzi
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing