Make a Glass Shield with HTML and CSS

In the next one minute we want to see , how we can make a glass shield card effect also known as “glass morphism” with HTML and CSS.
This effect helps to give a blurred effect to any object you want to put in background of your blurred image as you can see the sample above!
Follow along in below steps and check on each and every lines of the script of CSS and HTML provided below for your ease of use and access, and you will have this effect in just one minute.