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:
https://github.com/patriciamolnar/gla...
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: / pmcoding
Instagram: / pmcoding
CodePen: https://codepen.io/patriciamolnar