bubbleHacks Weekly

Share this post

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

bubblehacks.substack.com

Discover more from bubbleHacks Weekly

Join 1,000+ subscribers who trust bubbleHacks Weekly for the top weekly Bubble.io news, resources, and hacks. Stay ahead of the curve in the NoCode revolution with our concise, curated updates.
Over 1,000 subscribers
Continue reading
Sign in

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

Damian
Jan 1, 2022
4
Share this post

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

bubblehacks.substack.com
1
Share

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.

4
Share this post

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

bubblehacks.substack.com
1
Share
1 Comment
Share this discussion

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

bubblehacks.substack.com
Louis Pereira
Writes Read Something Great
Jan 1, 2022Liked by Damian

Great tip!

Expand full comment
Reply
Share
Top
New
Community

No posts

Ready for more?

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