I'm currently working on a new personal project and decided to give glassmorphic cards a looking into. Though what I found was very inspirational, I decided to go a different route for my approach. The result ended looking like so:
For my card's design and functionality, I used vanilla-tilt.js - "a smooth 3D tilt javascript library forked from Tilt.js (jQuery version)"
I wanted a very nice shadow on the card and added such styles in my stylesheet:
I think having the word "RESULTS" on the side was a nice touch that gave the card more personality. With it being in the corner where there isn't much text overlapping, there is a very distinct look it gives off. I may think about making the word a shade lighter and make it a little more reflective in the future depending on how the rest of the card ends up looking when it gets populated.
There are a lot more options from vanilla-tilt that I did not use:
What do you think? Always appreciate feedback
Happy coding!
Top comments (2)
That looks cool!
Thanks!