Lift with shadow

Hover lifts the element up and deepens its shadow — the classic card interaction.

Hover me

Me too

Widely Supported

animationno-js

Quick implementation

.lift-shadow {
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lift-shadow:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .lift-shadow { transition: none; }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building card hover interactions.

Goal: A reusable lift-on-hover effect using CSS transform and box-shadow — no JavaScript.

Technical constraints:
- Use translateY(-4px) for the lift — compositor-only, no layout shift.
- Deepen box-shadow on hover: rest state 0 2px 8px, hover state 0 8px 24px.
- Transition both transform and box-shadow with 0.25s ease.
- Use oklch() for shadow colors, not hex or rgba().
- Include @media (prefers-reduced-motion: reduce) to disable the transition.

Framework variant (pick one):
A) Vanilla CSS utility class applicable to any element.
B) React hook — useLiftShadow() that returns style props.

Edge cases to handle:
- Shadow must use oklch(0 0 0 / alpha) for consistent color-space rendering.
- Touch devices: :hover persists after tap — consider @media (hover: hover) guard.
- Combine with border-radius for rounded cards — shadow inherits the shape.

Return CSS.

Why this matters in 2026

Lift with shadow is the standard card hover pattern across the web. It communicates "this element is interactive" by mimicking a physical lift off the surface. Two properties — translateY and box-shadow — create a depth effect that feels tangible without JavaScript.

The logic

translateY(-4px) moves the element upward on the GPU compositor. Simultaneously, the shadow offset grows from 2px to 8px and the blur from 8px to 24px, simulating a higher elevation from the light source. Transitioning both properties together creates a unified "lifting" illusion.

Accessibility & performance

transform runs on the compositor, so the lift is zero-cost for layout. box-shadow does trigger paint, but on a single element per hover it's negligible. prefers-reduced-motion disables the transition so the shadow change is instant. For touch devices, wrap in @media (hover: hover) to prevent the hover state from sticking.