Make a Glassmorph card in less than 5 minutes!

Hey everyone 👋🏻, today we are going to make a glass morphism card using only HTML and CSS!

Now, what is glass morphism, it is a UI trend which was trending in recent times and is very very easy to make, so without wasting any time let's get started 👩🏻‍💻.

Steps to make a glass-morph card :

1. Make a div with a linear gradient(not necessary) or make any shape, this shape will go behind the card to make it look translucent.

2. Make the div with a class of card, give it some width and height, center it on the screen using position: absolute; or display: flex whichever method you like.

3. Now there are 2 main properties to be applied on the card, which will make it look like translucent object, the properties are :

   background: linear-gradient(
    101.96deg,
    rgba(249, 249, 249, 0.261) -0.52%,
    rgba(249, 249, 249, 0.0775668) 88.4%,
    rgba(249, 249, 249, 0.058) 100.25%
   );
   

   backdrop-filter: blur(20px); /* some browsers don't support this property but if you still wanna try it out then use chrome */
   

That's it you have made a glass-morph card on your own 🥳!! Wasn't that easy?!!

---

Thank you for reading the whole blog 🎉, and if you found it helpful then do implement this in your projects!!

---

// connect: My Socials