How to implement frosted glass affect (glassmorphism)

Photo by Muhannad Ajjan on Unsplash

Background

Glass morphism is a UI design trend that creates a Frosted Glass aesthetic. It’s been used in Mac and Windows OS, and web and mobile designers have also picked it up. I really like this trend, and when I was first saw it I thought it would be somewhat complicated. But after some research, I found it to be rather simple. After watching a YouTube video, I implemented this design on my website.

Implementation

Now, let’s get into it.

First, define your HTML elements and give them a proper class name.

Next, style your classes. Note, the backdrop-filter will define how much blur to apply to the card.

Having some sort of object or dark background behind the card will give the most dramatic effect. In my case, I have a circle that can be seen behind the card.

Bonus

Here is a cool website that will generate the CSS for you: glassmorphism.com. In the YouTube link that I provided above, they added a tilt affect on the card using a JS library, which I also implemented on my website.

Conclusion

Glassmorphism is a cool design that can be implemented with a few lines of CSS. Take the examples here, change them up and and tag me on Instagram. I’d love to see what you come up with!

Tech analyst at Accenture. Mobile app and web developer. Passionate about tech and education.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store