webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Tilt Glow Card — Free HTML CSS JS 3D Hover Card Snippet

Tilt Glow Card · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
Tags3D EffectsMicro-Interactions

Copy & paste

Source Code

<article class="tg-card" id="tgCard">
  <div class="tg-glow" id="tgGlow"></div>
  <div class="tg-inner">
    <span class="tg-badge">Pro plan</span>
    <h3 class="tg-title">Realtime Analytics</h3>
    <p class="tg-text">Track every event as it happens with sub-second dashboards and unlimited retention.</p>
    <div class="tg-foot">
      <span class="tg-price">$29<small>/mo</small></span>
      <button type="button" class="tg-btn">Upgrade</button>
    </div>
  </div>
</article>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Cursor-aware 3D tilt
rotateX and rotateY map to pointer position.
Pointer-tracking glow
A radial gradient driven by CSS variables.
Parallax content layer
translateZ floats the body above the card.
GPU-only animation
Only transform changes — no reflow.
Perspective depth
perspective() makes the tilt read as 3D.
Smooth reset
mouseleave settles the card back flat.
Single config constant
One MAX value controls tilt intensity.
Content-agnostic
Wrap any markup in the card.

About this UI Snippet

Tilt Glow Card — A 3D Card That Leans Into the Cursor

Screenshot of the Tilt Glow Card snippet rendered live

The tilt glow card is the interactive product card that rotates in 3D space toward your pointer while a soft radial glow follows underneath — the effect popularised by modern SaaS and developer-tool landing pages. This snippet builds it with plain HTML, CSS 3D transforms, and a small vanilla JavaScript mousemove handler, with no library or canvas.

The 3D tilt math

On every mousemove the handler reads the card's getBoundingClientRect() and converts the cursor position into two normalised ratios from 0 to 1 across the width and height. Those ratios are mapped to rotateX and rotateY angles, deliberately inverted on each axis so the corner under the pointer lifts toward you rather than away — that inversion is the difference between a tilt that feels physical and one that feels wrong. The transform is applied with a perspective(800px) prefix so the rotation reads as depth instead of a flat skew.

The pointer-tracking glow

A separate absolutely-positioned .tg-glow layer holds a radial-gradient whose centre is driven by two CSS custom properties, --mx and --my. The same handler writes the cursor percentage into those variables, so the highlight slides under the cursor in real time. The glow only fades in on :hover via an opacity transition, which keeps the resting card clean and makes the light feel like it switches on as you approach.

Layered depth with translateZ

The inner content sits on its own layer pushed forward with transform: translateZ(40px) inside a transform-style: preserve-3d parent. Because the content lives closer to the viewer than the card surface, it parallaxes slightly as the card rotates, giving the title and button a genuine sense of floating above the panel rather than being painted onto it.

Smooth, cheap, and jank-free

The tilt transition is intentionally short (about 120ms) so the card chases the cursor responsively without lagging, and will-change: transform hints the compositor to promote the card to its own layer. Because only transform and a couple of custom properties change per frame, the browser never reflows or repaints layout — the whole effect runs on the GPU. On mouseleave the transform resets to zero so the card settles flat.

Customizing it

Tune the MAX constant to make the tilt subtler or more dramatic, change the glow colour and radius in the gradient, or adjust translateZ to push the content further forward. Drop in any content — pricing, a feature, an avatar — and the effect still works. Pair it with a spotlight card grid or a pricing card section for an interactive landing page.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA pricing-style card renders, flat at rest.
  2. 2
    Hover the cardIt tilts toward the cursor and a glow fades in.
  3. 3
    Move the pointer aroundThe tilt and glow follow the cursor in real time.
  4. 4
    Move the cursor awayThe card settles smoothly back to flat.
  5. 5
    Adjust the tiltChange the MAX constant for more or less rotation.
  6. 6
    Swap the contentDrop in any card body — the effect still works.

Real-world uses

Common Use Cases

Interactive pricing tiers
Make a pricing card feel alive, tilting in 3D toward the cursor with a radial glow tracking the pointer.
Feature highlights
Tilt a spotlight card on hover so a key feature leans toward the visitor, with content floating above through translateZ.
Product showcase lift
Lift a product card toward the user, using only transform changes so no layout reflow occurs.
Portfolio grids
Add depth to focus cards or project tiles, with rotateX and rotateY mapped to pointer position.
Hero callouts and dashboards
Float a panel above a gradient mesh hero, or make a glass stat card feel tactile.

Got questions?

Frequently Asked Questions

On each mousemove the handler reads getBoundingClientRect() and turns the cursor position into ratios from 0 to 1 across the card. Those ratios map to rotateX and rotateY angles, inverted per axis so the corner under the pointer lifts toward you. A perspective(800px) prefix turns the rotation into real depth instead of a flat skew.

A separate glow layer holds a radial-gradient centred on two CSS custom properties, --mx and --my. The same mousemove handler writes the cursor percentage into those variables, so the highlight slides under the pointer. It fades in only on hover via an opacity transition, so the resting card stays clean.

The inner content is pushed forward with translateZ(40px) inside a transform-style: preserve-3d parent. Because it sits closer to the viewer than the card surface, it parallaxes as the card rotates, giving the title and button a genuine floating feel rather than looking painted on.

No. Only the transform and two custom properties change per frame, so the browser never reflows or repaints layout — the work runs on the GPU compositor. will-change: transform promotes the card to its own layer, and a short transition keeps it chasing the cursor responsively without lag.

Attach onMouseMove and onMouseLeave handlers to the card element via a ref. Compute the rotation from the event and the ref's bounding rect, then write the transform and CSS variables imperatively on the ref rather than through state, so you do not re-render on every pointer move. The 3D and gradient CSS port unchanged; in Tailwind use perspective and transform utilities with arbitrary values.