← All elements
<div class="ls"><b>Lift</b><span>Hover me</span></div>About this card
A tile that lifts on hover while a stack of progressively softer shadows builds up beneath it.
How it works
Instead of one blurry shadow, five shadows are layered with doubling offsets and blurs, a technique that gives a softer and more realistic falloff. On hover the card translates up and the shadow list expands to the larger set.
Ways to customise it
- Use a coloured shadow like #6366f126 for a tint.
- Change -10px for a bigger lift.
- Add a sixth layer for more depth.
Good to know
Shadows are decorative so they add no contrast information. Transitioning many shadows is fine on one card but avoid it on hundreds of items at once.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.