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 👩🏻💻.
divwith a linear gradient(not necessary) or make any shape, this shape will go behind the card to make it look translucent.
divwith a class of
card, give it some width and height, center it on the screen using
display: flexwhichever method you like.
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!!