DEV Community

loading...
Cover image for Make a glass-morph card in less than 5 minutes!

Make a glass-morph card in less than 5 minutes!

Shreyas Pahune
Hey there πŸ‘‹πŸ», I am Shreyas Pahune a Full-Stack Web and a Flutter developer who loves to write blogs.
・Updated on ・1 min read

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

Discussion (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 Author • Edited

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

Collapse
hrushikesh41 profile image
Hrushikesh41

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 Author

Thank's a lot πŸŽ‰!