Back to Dictionary
Action Feedback
●○○Ready to Use
Hover Lift Effect
A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.
Live Demo
What It Is
A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.
✓When to Use
- Interactive cards in a grid
- Pricing tiers
- Feature showcases on landing pages
✕When NOT to Use
- Dense data tables
- Inline text links
Configuration Tips
- 01Lift by -4px or -6px (translate-y-[-4px])
- 02Transition shadow from sm to md or lg
- 03Use a 200-300ms ease-out timing function
You've Seen It In
StripeVercelLinear
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Make this card lift up slightly and cast a bigger shadow when I hover over it.
Code Example (Tailwind CSS)
export function HoverLiftEffectDemo() {}