Make a glass-morph 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

Comments

[Hrushikesh Kokardekar]

Nice work Shreyas. Found it very useful

[Anshul Soni]

too good bro

[Rishabh Singh ⚡]

Great tutorial, Shreyas! I'll love to use this effect in my next project 🤩

[Shreyas Pahune]

Thanks bro! I would love to see how you'll use it in your porject!!

[Krish Savani]

Great tutorial!
Its very simplified and beginner friendly and ez to understand.

[Shreyas Pahune]

Thank's a lot 🎉!