Why does the tilt need a wrapper element with perspective?

perspective only affects the 3D rendering of its children, not the element it's set on. Put perspective on an outer .tilt-wrap and rotateX/rotateY on the inner .tilt-card so the card rotates in 3D space relative to that vantage point instead of just flattening in place.

What's the difference between Tilt X and Tilt Y?

rotateX tips the card forward/backward around a horizontal axis (as if nodding), while rotateY turns it left/right around a vertical axis (as if shaking its head). Most tilt-card effects combine a small amount of both for a diagonal, corner-lifted look.

Can I make the tilt follow my cursor instead of a fixed hover angle?

Not with CSS alone — this generator produces a fixed-direction tilt that always rotates the same way on hover, which covers most use cases with zero JavaScript. True cursor-tracking tilt (like a holographic trading card) needs a few lines of JS to read the mouse position and set rotateX/rotateY as CSS custom properties on mousemove.

Why is my card clipping instead of tilting in 3D?

Make sure nothing between .tilt-wrap and .tilt-card sets overflow: hidden or a conflicting transform — either will flatten or crop the 3D effect. Also confirm transform-style: preserve-3d is present if you nest more layered children inside the card.

Does this tool store or upload anything?

No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.

CSS 3D TILT CARD GENERATOR

Build a card that tilts in 3D on hover, tune the angle and glare, and copy the CSS.

Hover this card

Perspective: 900pxDuration: 300msTilt X: 12°Tilt Y: 14°Hover scale: 1.04x

Glare overlayForce preview

.tilt-wrap {
  perspective: 900px;
}

.tilt-card {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) scale(1);
  transition: transform 300ms ease;
  border-radius: 14px;
  background: #ff6a35;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
}

.tilt-wrap:hover .tilt-card {
  transform: rotateX(12deg) rotateY(14deg) scale(1);
}

.tilt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.tilt-wrap:hover .tilt-card::after {
  opacity: 1;
}

How to use the tilt card

1
Hover the preview card to see the 3D tilt in action.
2
Adjust perspective, tilt X/Y angle, duration, and hover scale with the sliders.
3
Toggle the glare overlay for a glossy sheen on hover.
4
Pick a background color.
5
Copy the CSS and HTML — wrap your card markup in .tilt-wrap > .tilt-card.

Questions

Why does the tilt need a wrapper element with perspective?: perspective only affects the 3D rendering of its children, not the element it's set on. Put perspective on an outer .tilt-wrap and rotateX/rotateY on the inner .tilt-card so the card rotates in 3D space relative to that vantage point instead of just flattening in place.
What's the difference between Tilt X and Tilt Y?: rotateX tips the card forward/backward around a horizontal axis (as if nodding), while rotateY turns it left/right around a vertical axis (as if shaking its head). Most tilt-card effects combine a small amount of both for a diagonal, corner-lifted look.
Can I make the tilt follow my cursor instead of a fixed hover angle?: Not with CSS alone — this generator produces a fixed-direction tilt that always rotates the same way on hover, which covers most use cases with zero JavaScript. True cursor-tracking tilt (like a holographic trading card) needs a few lines of JS to read the mouse position and set rotateX/rotateY as CSS custom properties on mousemove.
Why is my card clipping instead of tilting in 3D?: Make sure nothing between .tilt-wrap and .tilt-card sets overflow: hidden or a conflicting transform — either will flatten or crop the 3D effect. Also confirm transform-style: preserve-3d is present if you nest more layered children inside the card.
Does this tool store or upload anything?: No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.