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.

arturocreates.com

Implementation

Now, let’s get into it.

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

<div class="card">
<div class=”content”>
<h2>Arturo</h2>
<img src=”./static/images/profile-pic.png” class=”card-pic”/>
<h3>Mobile app and web developer</h3>
</div>
</div>

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

.card{
position: relative;
width: 280px;
height: 400px;
margin: 30px;
box-shadow: 20px 20px 50px rgb(0, 0, 0, 0.5);
border-radius: 15px;
background: rgb(225, 225, 225, 0.1);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-top: 1px solid rgb(225, 225, 225, 0.5);
border-left: 1px solid rgb(225, 225, 225, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.card .content{
padding: 20px;
text-align: center;
}
.card .content h2{
position: absolute;
top: 10px;
right: 10px;
font-size: 3rem;
color: rgb(225, 225, 225, 0.5);
pointer-events: none;
}
.card .content h3{
font-size: 1.6rem;
color: rgba(225, 225, 225, 0.856);
z-index: 1;
pointer-events: none;
}

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!