DEV Community

Cover image for Make a glass-morph card in less than 5 minutes!
Shreyas Pahune
Shreyas Pahune

Posted on • Updated on

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%
  ); 
Enter fullscreen mode Exit fullscreen mode
  backdrop-filter: blur(20px); /* some browsers don't support this property but if you still wanna try it out then use chrome */
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
mindninjax profile image
Rishabh Singh ⚑

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

Collapse
 
shreyazz profile image
Shreyas Pahune • Edited

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

Collapse
 
hrushikesh41 profile image
Hrushikesh Kokardekar

Nice work Shreyas. Found it very useful

Collapse
 
anshulsoni4 profile image
Anshul Soni

too good bro

Collapse
 
krishsavani profile image
Krish Savani

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

Collapse
 
shreyazz profile image
Shreyas Pahune

Thank's a lot πŸŽ‰!