tilt-card-3d

3D tilt with light

A card that leans toward the pointer with a soft moving highlight — makes a real product shot feel physical.

All modern browsers. Mouse and pen only; touch devices get a static card.

Use it for

Product shots, app screenshots, book covers, posters — real imagery
A small set (1–4) of hero objects you want people to play with

Don't — this is how it turns into slop

Grids of icon cards — tilting template cards just makes them wobbly template cards
Cards containing forms or dense text

Accessibility

Disabled for prefers-reduced-motion and coarse pointers
Purely decorative — no information depends on the tilt

Performance

Pointer updates are batched per animation frame; only transform and custom properties change

The code

/* 3D tilt with a moving light — the card leans toward the pointer and a
   soft highlight follows it, like holding a real print under a lamp. */
.tilt {
  --rx: 0deg;
  --ry: 0deg;
  --lx: 50%;
  --ly: 50%;
  --tilt-max: 8deg;
  position: relative;
  border-radius: 20px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.tilt.is-tilting {
  /* Follow the pointer tightly while moving; ease back on leave. */
  transition-duration: 0.08s;
}

.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--lx) var(--ly),
    rgb(255 255 255 / 0.35),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: soft-light;
}

.tilt.is-tilting::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .tilt {
    transform: none !important;
  }
  .tilt::after {
    display: none;
  }
}

Which of these fit your site?

Scan your URL for free. The full review picks recipes for each section and hands your AI a complete design kit.

Check my site ↑