fluent-kit

I want to add the card lift effect to my bootstrap cards with fluent design styles on hover. You can see what I mean on microsoft design website . Here's what I tried, but there is something missing and I cannot quite grab it. I tried: .card { box-shadow: -3px 6px 5px 0px rgba(176,164,176,1); transition: all .3s ease-in-out; } .card:hover { box-shadow: -3px 18px 20px 0px rgba(99,89,99,1); } <div class="card" style="width:19.5rem"> <div class="card-body"> Lorem ipsum dolor sit ameta, card content </div> </div> Kindly thanks for your help. What makes the effect to looks like it is lifting is the