← Back to gallery
CSS

Card Hover Shadow Depth

Three elevation tiers driven purely by layered box-shadows on hover and focus-visible, keeping layout stable while conveying perceived depth.

Duration
1s
Resolution
1440×900
Format
CSS
cardhover-liftbox-shadowelevationfocus-visible

Interaction / box-shadow / elevation

Card hover shadow depth

Reimplements three elevation tiers using rest/hover shadow pairs. Layout stays stable; optional tiny translateY lifts add kinetic affordance only for the hero preset.

flat to soft — hover blur 12px, lift 0px

Card hover inspector

Flat to Soft

Subtle elevation on hoverFlat to SoftHover or keyboard-focus to trigger elevation.

Hover the card to see rest → hover transition.

Hover shadow
y 4px · blur 12px
Lift
0px

Pairs with a tiny translateY(-2px) lift only if needed. Keep opacity moderate so the hover reads as calm, not dramatic.

css
.hover-card {
  display: block;
  padding: 20px;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.18s ease,
              transform 0.18s ease;
}

.hover-card:hover,
.hover-card:focus-visible {
  box-shadow: 0 4px 12px 0px rgba(0, 0, 0, 0.55);
}

.hover-card:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hover-card { transition: box-shadow 0.18s ease; transform: none !important; }
  .hover-card:hover, .hover-card:focus-visible { transform: none; }
}