The glare card mimics a holographic trading card or foil credit card: it tilts in 3D toward your cursor while a bright glare hotspot and a rainbow foil sheen shift across its surface, exactly like catching the light on a real holo. This snippet builds it with plain HTML, CSS blend modes, and a single vanilla JavaScript pointer handler.

3D tilt from pointer position

The card lives in a perspective: 900px stage and uses transform-style: preserve-3d. A pointermove handler converts the cursor's position within the card into 0–1 fractions, then maps them to rotateX and rotateY values up to about 14° each — inverted on the vertical axis so the card tips toward the pointer rather than away. The short .12s transition smooths the motion without lagging behind the cursor. On pointerleave it resets to flat.

The glare hotspot

A .gl-glare layer is a radial gradient whose center is driven by two CSS custom properties, --mx and --my, updated from the same pointer handler. Because the gradient is centered at var(--mx) var(--my), the bright spot tracks exactly under the cursor. The layer uses mix-blend-mode: soft-light so the white glare brightens the card's colors realistically instead of painting an opaque white blob — it reads as light reflecting off a glossy surface.

The holographic foil

The signature rainbow comes from a .gl-foil layer filled with a conic-gradient cycling hot pink, purple, teal, and yellow, sized at 200% so it can pan. On pointer move, its background-position shifts with the cursor, making the colors flow and swirl. The key is mix-blend-mode: color-dodge, which makes the foil interact with the dark card beneath to produce the iridescent, metallic shimmer characteristic of holographic foil — a plain overlay would just look like a flat gradient. The foil fades in on hover so the card is calm at rest.

Depth on the content

The card body is pushed forward with translateZ(40px) inside the preserve-3d context, so as the card tilts, the text appears to float above the foil and glare layers with real parallax. This separation sells the 3D — the content and the surface effects move at visibly different depths.

Why blend modes matter here

Both surface effects rely on blend modes rather than opacity. soft-light and color-dodge compute their result from the colors underneath, so the same glare looks different over the dark navy card than it would over white — which is physically how reflections and foils behave. This is what separates a convincing holo effect from a generic gradient overlay.

Customizing it

Tune the 28 multiplier for a stronger or subtler tilt, change the glare radius and opacity, swap the foil's conic colors to theme the holo, or adjust the translateZ to push the content nearer or further. Replace the card content with a real product, ticket, or collectible. Pair it with a wobble card or a pin card for a set of tactile 3D cards, or use it as a premium pricing card tier.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Rather than reverse-engineering the tilt math by eye, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain precisely why the rotateY sign flips relative to rotateX in the pointermove handler, and why the foil layer needs mix-blend-mode: color-dodge instead of a plain opacity overlay to read as metallic. It can also help you optimize the effect, for instance checking whether writing rotateX/rotateY and the --mx/--my custom properties on every pointermove event is worth throttling with requestAnimationFrame on lower-end devices. For extending it, ask for a version that adds multiple glare hotspots for multi-touch, swaps the conic-gradient palette based on a data attribute per card, or drives the tilt from a device orientation sensor on mobile instead of the pointer. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a holographic "glare card" in plain HTML, CSS, and JavaScript using CSS 3D transforms and blend modes only — no canvas, no images, no libraries.

Requirements:
- A card sitting inside a container with CSS perspective set, using transform-style: preserve-3d so its content can be pushed forward in 3D space.
- A single pointermove listener on the card that converts the cursor's position within the card's bounding rect into 0-1 fractions on both axes, then maps them to rotateX and rotateY values (roughly plus or minus 14 degrees), inverting the vertical axis so the card visually tips toward the cursor rather than away from it. Reset the transform to flat on pointerleave.
- A radial-gradient glare layer, absolutely positioned over the whole card, whose center position is driven by two CSS custom properties updated from the same pointermove handler (in percentage units), using mix-blend-mode: soft-light so it brightens the surface like a reflection instead of painting an opaque white shape.
- A holographic foil layer using a large conic-gradient (looping through at least four saturated hues) sized above 100% so it can pan, with mix-blend-mode: color-dodge so it reacts with the dark card background to look metallic and iridescent, and its background-position shifting with the same pointer fractions so the colors visibly flow as the cursor moves.
- Both the glare and foil layers should be invisible (opacity 0) at rest and fade in only on hover.
- The card's actual content (heading, text, footer) must sit in its own layer pushed forward with translateZ so it visibly floats above the glare and foil layers as the card tilts, creating real parallax separation.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA dark collectible card renders, calm at rest.
2
Move the pointer over itThe card tilts in 3D toward your cursor.
3
Watch the glareA bright hotspot follows the pointer like light on gloss.
4
See the foilA rainbow holographic sheen flows as you move.
5
Leave the cardIt eases back to flat.
6
Theme the holoSwap the conic foil colors and tilt strength.

Real-world uses

Common Use Cases

NFT and collectibles

Show a holo card beside a pin card.

Premium pricing tiers

A flashy pricing card variant.

Membership cards

Pair with a wallet card flip.

Event tickets

Make a boarding pass feel special.

Product hero shots

Combine with a wobble card grid.

Blend-mode demos

A reference for color-dodge holographic foil.

Got questions?

Frequently Asked Questions

It sits in a perspective stage, and a pointermove handler converts the cursor's position inside the card to 0–1 fractions, then maps them to rotateX and rotateY up to about 14 degrees each. The vertical axis is inverted so the card tips toward the pointer. A short transition smooths it, and pointerleave resets to flat.

The foil is a panning conic-gradient layer set to mix-blend-mode: color-dodge. color-dodge computes its result from the dark card beneath, producing an iridescent metallic shimmer rather than a flat overlay. Its background-position shifts with the pointer so the rainbow flows as you move.

soft-light for the glare and color-dodge for the foil derive their colors from the layers underneath, so the same effect looks different over the dark card than it would over white — which is physically how reflections and foils behave. Plain opacity overlays look like flat gradients and break the holographic illusion.

The card uses transform-style: preserve-3d and the body is pushed forward with translateZ(40px). As the card tilts, the content moves at a different depth than the glare and foil layers, creating real parallax that separates the text from the surface and reinforces the 3D.

Render the structure as a component and keep the perspective and preserve-3d CSS. Handle pointermove and pointerleave with framework events, writing the transform and the --mx/--my/background-position via a ref so moves don't trigger re-renders. The blend-mode layers are pure CSS. In Tailwind, use perspective and transform utilities with mix-blend-color-dodge and mix-blend-soft-light.

Loading…