Glassmorphism Tutorial 2021 - How to code Glassmorphism with CSS

Glassmorphism is a web design trend that is becoming more and more popular in 2021. By adding a combination of a semi-transparent background, a background blur, a box-shadow and a semi-transparent border you can make elements on your page appear like they are a separate layer of frosted glass hovering over other content.

In this tutorial, I will show you how to apply the Glassmorphism effect to a button and to the navigation menu.

The final code is available through my GitHub:
github.com/patriciamolnar/glassmorphism

To find out how I created the navigation for this video, watch my navigation menu tutorial here:
   • How to code a responsive navigation menu w...  

Some other tutorials, which might interest you:

Create animated underlines as user scrolls through your website:
   • Animated Underline using Intersection Obse...  

How to code a CSS nav animation:
   • How to create a transitioning and colour c...  

I put out web development and design tutorials weekly, so subscribe for more:
   / channel  

I am also on social media, so feel free to connect and reach out:
Twitter: twitter.com/pmcoding
Instagram: instagram.com/pmcoding
CodePen: codepen.io/patriciamolnar