How to implement frosted glass affect (glassmorphism)

Photo by Muhannad Ajjan on Unsplash

Background

arturocreates.com

Implementation

<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>
.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;}

Bonus

Conclusion

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