DEV Community

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

Posted on β€’ Edited on

9 4

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

Retry later

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 πŸŽ‰!

Retry later
Retry later