Depth Lift Hover Effect

This hover effect increases perceived depth using elevation and subtle scale, helping users identify interactive surfaces without visual noise.

HTML

<div class="hover-lift">
  Hover me
</div>

<div class="hover-lift">
  Hover me
</div>

CSS

.hover-lift {
  width: 200px;
  padding: 0.9rem;
  border-radius: 16px;
  background: #ffffff;
  color: #111827;
  text-align: center;
  font-size: 13px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.2);
}

@media (prefers-color-scheme: dark) {
  .hover-lift {
    background: #020617;
    color: #e5e7eb;
  }
}

.hover-lift {
  width: 200px;
  padding: 0.9rem;
  border-radius: 16px;
  background: #ffffff;
  color: #111827;
  text-align: center;
  font-size: 13px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.2);
}

@media (prefers-color-scheme: dark) {
  .hover-lift {
    background: #020617;
    color: #e5e7eb;
  }
}

Notes

• Clear affordance through depth
• No color dependency
• Works across cards and list items

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.