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 :
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.Make the
div
with a class ofcard
, give it some width and height, center it on the screen usingposition: absolute;
ordisplay: flex
whichever 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!!
// connect:
My Socials
Top comments (6)
Great tutorial, Shreyas! I'll love to use this effect in my next project π€©
Thanks bro! I would love to see how you'll use it in your porject!!
Nice work Shreyas. Found it very useful
too good bro
Great tutorial!
Its very simplified and beginner friendly and ez to understand.
Thank's a lot π!