Glassmorphism Shield Effect in HTML & CSS – Frosted Glass Design

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.

Steps:

1. First, define the classes in the HTML part.
2. Set the custom CSS in the “background” class, like width, height and etc.
3. Set the custom CSS in the “blurry-card” class, like width, height and etc. In this step note to the important line
   – backdrop-filter: blur(10px);
   In this line we create our blurry effect.
4. So in the last step set the custom CSS for our text in the “card-text” class.

See the Pen Make a Glass Shield with HTML and CSS by Cherry Grafik (@Cherry-Grafik) on CodePen.