For your stacked elements: Stop using border or box-shadow. Start using mask.

There are always issues when you use box-shadow, border, or outline for this. You forget to change the color so it mismatches the background. You want to add hover interactions so you need to transition both. The CSS is quite simple:

RT @InstaMAT_io: 👀 Are you looking for an alternative to Adobe Substance tools? Do not miss out on InstaMAT from killer node-based material…

Another wonderful trick: clip-path with SVGs. It's a lot easier to customize in tools like Figma as well.

I had to give up on this approach when I wanted to be able to make an avatar translate up on hover and stuff like that — found any solution to that set of problems?

elite

now u r too

mask is also pretty good to create that fade out effect

This is the way

✍️✍️✍️

Working on a stacked cards design and gonna get rid of the box-shadows and try this!