Card Hover Lift Effect with Shadow and Transform

Card Lift Pattern

The card lift effect is ubiquitous in modern web design. When the user hovers over a card, it appears to rise off the page with an enhanced shadow, signaling interactivity.

CSS Code

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
  transition: transform 0.3s ease-out,
              box-shadow 0.3s ease-out;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

The Depth Illusion

The lift effect works because of two synchronized changes:

1. translateY(-6px) moves the card upward
2. Enlarged shadow with increased blur and offset simulates greater distance from the page surface

Together, these create a convincing 3D depth illusion without any actual 3D transforms.

Shadow Design Tips

For a natural-looking shadow, increase both the offset-y and blur-radius as the element "rises":

State	Shadow
Rest	0 1px 3px rgba(0,0,0,0.08)
Hover	0 12px 32px rgba(0,0,0,0.12)

Notice that the shadow opacity stays low. Heavy shadows look unrealistic. The blur radius increase (3px to 32px) does most of the work.

Adding Border Transition

Some designs also transition the border color for extra emphasis:

.card {
  border: 1px solid var(--border);
  transition: transform 0.3s ease-out,
              box-shadow 0.3s ease-out,
              border-color 0.3s ease;
}

.card:hover {
  border-color: var(--primary);
}