A plain card with a border and a drop shadow gets the job done, but it doesn't get remembered. The cards that make a portfolio or landing page feel "designed" almost always have one thing in common: they react to you. Below are 8 free hover-card snippets — cursor-tracking glows, 3D tilts, twinkling stars, scrambled text reveals — you can preview live and copy in seconds. Pure HTML, CSS and a few lines of JS, no framework required.
This isn't just a copy-paste dump, either. For every card you'll find how the effect actually works, when to reach for it (and when not to), and a quick tip for customising or keeping it accessible. By the end you'll understand the handful of CSS and JavaScript techniques — CSS custom properties as a bridge from JS to CSS, 3D transforms, clip-path and mask tricks — that power almost every "wow" card effect on the modern web.
Every card below is a live, interactive preview — move your cursor over it right in the article. When you find one you like, hit View / Edit Code to grab the HTML/CSS/JS or export it to React, Vue, Angular or Tailwind.
What makes a hover card feel "good"?
Before the snippets, it's worth knowing what you're actually copying. A card that feels satisfying — rather than gimmicky — almost always gets four things right:
- The cursor is the input — the best effects don't just play a canned animation on hover, they track the pointer's exact position and respond to it, which is what makes them feel physical rather than scripted.
- CSS custom properties as the bridge — JavaScript reads the mouse position once and writes it into a
--mx/--myvariable; CSS does the actual rendering. That split keeps the JS tiny and the animation buttery, because the browser — not a JS loop — repaints the gradient or transform every frame. - Restraint — one striking effect per card. Stack a tilt, a glow, a border animation and a shadow bounce on the same element and it reads as noisy rather than premium.
- A graceful default state — the card should still look complete before anyone touches it. Hover should enhance, not carry, the design.
Keep those four in mind as you scroll — each snippet below leans on one or more of them.
1. Spotlight Hover Card
A soft radial glow that follows your cursor around inside the card, with a matching light picking out the border. It's the single most common effect on modern SaaS feature grids — and it's cheaper to build than it looks.
How it works: a pointermove listener converts the cursor's screen position into coordinates relative to the card and writes them to two CSS custom properties, --mx and --my. A radial-gradient background reads those variables as its centre point, so the glow appears to "follow" the mouse — but the actual repainting is done entirely by CSS. The illuminated border is a second, sharper radial gradient on a pseudo-element, masked with mask-composite: exclude so only a thin ring around the edge shows through.
Best for: feature grids, pricing tiers, and dashboard widgets where you want a whole row of cards to feel cohesive rather than each one shouting for attention. Tip: if you're driving multiple cards from one shared listener (like a grid), update every card's variables together — it reads as one connected surface instead of independent hotspots.
Grab the code: Spotlight Hover Card
2. 3D Card Tilt
The card leans away from your cursor like a physical object catching the light, then eases back flat the instant you leave. It's the effect that made "Aceternity-style" component libraries so popular — and it's about 15 lines of JS.
How it works: on mousemove, the script finds the cursor's offset from the card's centre with getBoundingClientRect(), normalises it to a small range, and applies transform: perspective(800px) rotateX(...) rotateY(...) — tilting toward whichever edge is closest to the cursor. Because rotation is inverted on one axis, the card behaves like it's hinged at the pointer rather than spinning in place. On mouseleave the transform resets to flat with a CSS transition, so it glides back instead of snapping.
Best for: product cards, portfolio pieces, and any single hero card where a bit of "craft" pays off. Tip: keep the rotation range small (5–10°) — a dramatic tilt looks impressive in isolation but turns nauseating the moment you put six of these cards in a grid.
Grab the code: 3D Card Tilt
3. Glowing Stars Card
A dark card seeded with a grid of tiny "stars" that sit dim and still — until you hover, and a random scatter of them twinkles to life. It's one of the most atmospheric effects on this list for almost no runtime cost.
How it works: the sky is a CSS grid of small dots, and roughly a third of them get an .on class at build time so the pattern looks random rather than uniform. Each "on" star has its own CSS keyframe animation with animation-play-state: paused by default — so nothing is actually running, and costs zero CPU, until :hover flips the play state to running. That's the trick: dozens of independent animations sit dormant, ready to go, instead of being created and destroyed on hover.
Best for: dark-themed portfolios, developer tool landing pages, and "premium/AI" product cards where a bit of atmosphere sells the brand. Tip: the paused-by-default pattern here is reusable well beyond stars — any card with many small looping animations should pause them until hover so idle cards on a long page don't quietly burn battery.
Grab the code: Glowing Stars Card
4. Wobble Card
Grab the card with your cursor and it tilts around like a piece of card stock pinned at the centre, snapping flat the moment you let go. It reads as playful and tactile rather than sleek — a nice change of pace from glassy, corporate hovers.
How it works: a pointermove handler converts the cursor position into a normalised -1 to 1 range across the card's width and height, then feeds those values into rotateX()/rotateY() with a multiplier — the further from centre, the bigger the wobble. A cubic-bezier transition on the transform is what sells the "springy card stock" feeling rather than a mechanical tilt, and the reset on pointerleave uses the same easing so it settles rather than snapping flat.
Best for: playful brands, gift/reward cards, and app onboarding screens where a bit of personality is welcome. Tip: pair the cursor: grab styling from this snippet with a subtle scale-up on hover — it reinforces that the card is "physically" reacting to you, not just tilting on autopilot.
Grab the code: Wobble Card
5. Meteor Card
Streaking meteors fall diagonally across the card on a loop, each trailing a soft gradient tail. It's a purely decorative, ambient effect — no interaction required — that instantly makes a card feel like it belongs on a "launching soon" page.
How it works: each meteor is a tiny absolutely-positioned dot with a ::before pseudo-element stretched into a thin gradient line — the "tail" fading from bright to transparent. A CSS keyframe animates each meteor's transform diagonally from just above the card to past its bottom edge, and staggered negative animation-delay values on each one make them fall at different moments instead of in unison, so the loop never feels mechanical.
Best for: "coming soon" pages, AI/space-themed product cards, and a single hero testimonial or pricing card you want to feel a little more alive without demanding interaction. Heads-up: because it's a continuous loop, wrap it in @media (prefers-reduced-motion: reduce) and freeze it to a static gradient background for users who've opted out of motion.
Grab the code: Meteor Card
6. Evervault-Style Reveal Card
The card is filled edge-to-edge with a wall of scrambled, encrypted-looking characters — invisible until your cursor sweeps a small window of clarity over them, Matrix-decoder style. Genuinely one of the coolest small effects you can copy for free.
How it works: the scrambled text sits in the card at opacity: 0 by default, with a mask-image: radial-gradient(140px circle at var(--mx) var(--my), #000 0%, transparent 60%) — a mask that's only "visible" in a small circle. The same pointermove-to-CSS-variable trick from the spotlight card drives that circle to follow the cursor, and the card fades the whole stream to opacity: 1 on hover so the mask has something to reveal. Everywhere the mask is transparent, the text is effectively erased even though it's still rendered.
Best for: developer tools, security/crypto products, and API or "under the hood" feature cards where a decoding motif fits the brand. Tip: keep the revealed circle small (120–160px) — too large and you lose the "flashlight in the dark" feeling that makes the effect work.
Grab the code: Evervault-Style Reveal Card
7. Neo-Brutalist Card
A thick black border and a hard-edged, offset drop shadow — no blur, no gradient — that shifts and shrinks as you hover and click, like a sticker being pressed. It's the opposite aesthetic of a soft glow card, and just as popular right now.
How it works: the signature "brutalist" shadow is a box-shadow with zero blur radius — just an offset, like 8px 8px 0 #111 — which reads as a hard, flat shape instead of a soft shadow. On hover the card translates up and to the left while the shadow offset grows, so the gap between card and shadow widens, exaggerating the "lifted off the page" look; on :active both invert, so the card presses down into its own shadow. It's all instant, un-eased transforms — brutalism doesn't do gentle easing curves.
Best for: bold, high-contrast brands, indie products, and portfolio or link-in-bio pages that want to look deliberately "undesigned". Tip: this style lives or dies on colour contrast — stick to two or three flat, saturated colours and pure black borders rather than soft greys, or the brutalist effect just looks unfinished.
Grab the code: Neo-Brutalist Card
8. Glassmorphism Card
A frosted, translucent pane that lets a colourful background blur through it — the "glass" look that's been everywhere since iOS and Windows adopted it for system UI. Still one of the fastest ways to make a card feel modern.
How it works: the card is a semi-transparent background colour (typically white or black at 10–20% opacity) combined with backdrop-filter: blur(16px) — a property that blurs whatever sits behind the element, not the element itself. That's the whole trick: the card stays sharp and legible while the busy gradient or image behind it turns into soft, out-of-focus colour. A thin, semi-transparent border finishes the look by catching a hint of light along the edge.
Best for: login and signup panels over a photo or gradient hero, dashboard overlays, and any UI sitting on top of imagery. Heads-up: backdrop-filter is a genuine GPU cost, so avoid stacking dozens of glass cards on one screen — and always pair the include with the -webkit- prefix for full Safari support.
Grab the code: Glassmorphism Card
How to drop these into your project
Every snippet is framework-agnostic, so the workflow is the same wherever you're building:
- Open the snippet and hit View / Edit Code to see the HTML, CSS and JS in separate tabs.
- Paste the HTML into your markup, the CSS into your stylesheet, and the JS (if any) before your closing
</body>tag. - Prefer a component? Use the one-click export to React, Vue, Angular or Tailwind and drop the file straight into your app.
- Recolour to your brand by editing the gradient stops, accent colour, or CSS custom properties at the top of each snippet.
Keep your cards accessible and performant
Great visuals shouldn't cost you usability or battery life. Three quick rules cover almost every case:
- Prefer animating
transformandopacityover properties likewidth,top, orbox-shadowblur radius on every frame — the former run on the GPU compositor, the latter trigger layout or paint work that can visibly stutter on lower-end devices. - If a card is interactive (a link or button wrapped in the effect), keep a visible
:focus-visibleoutline — cursor-tracking effects are, by definition, invisible to keyboard users, so focus states are the only feedback they get. - Wrap continuous loops (meteors, twinkling stars, shimmer) in
@media (prefers-reduced-motion: reduce)and fall back to a static version for users who've opted out of animation.
Final Thought
These are just 8 of dozens of card styles you can copy for free — no login, no sign-up, everything runs in your browser. More importantly, the techniques behind them — cursor position piped into CSS custom properties, 3D perspective transforms, radial masks, and paused-until-hover animations — are the same building blocks that power tooltips, buttons, and entire hero sections. Learn them once here and you'll recognise them everywhere.
Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at FWD Tools UI Snippets — Cards — it's free and runs entirely in your browser. Looking for the button-focused version of this roundup? Check out 8 Copy-Paste CSS Button Snippets too.
