33 Tailwind CSS card hover effects for portfolio grids, product and pricing tiers, team profiles, and editorial covers — spanning 3D tilt and parallax, gradient and glass borders, image zoom and slide-up reveals, flip and book-open rotations, holographic foil, neon glows, glitch splits, and cursor spotlights. Scoped under .tch-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 33 Tailwind card hover effects. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
A featured-work card that rotates toward the cursor in real 3D while background, badge, title and copy ride separate Z planes and drift at different rates. The port's interesting cost: perspective, transform-style and translateZ have no utilities and stay arbitrary properties — but the whole child-layer contract collapses into one *: variant on the card.
A dark staking-vault card on frosted glass: a teal-to-violet bloom rises behind the blur and a matching neon ring ignites on whichever edge the cursor is nearest. backdrop-blur-[14px] saturate-[1.3] is a clean utility win; the masked border ring is the part that has to stay arbitrary, and the class list says so honestly.
The dependable shop-grid workhorse: the image scales inside a clipped frame while a frosted detail sheet slides up from a peeking strip. This is the port where Tailwind is simply better — group-hover: and group-focus-within: replace four descendant selectors, and keyboard parity costs one extra variant instead of a new rule.
A team-profile card that turns a full 180° to swap a photo-and-name front for a bio-and-links back. v4 is the first version where this port is genuinely tidy: transform-3d, rotate-y-180 and backface-hidden are all real utilities, so only perspective stays arbitrary.
Hover one pricing tier and every other tier blurs, dims and shrinks away — the whole effect is one relational selector, expressed here as has-hover:*:not-hover: on the grid. Three cards ship because the pattern only reads with siblings to react against.
The restrained one: nearly flat at rest, then an 8px lift and a four-layer shadow that reads as light blocked at four distances. The port's lesson is where shadows belong — two multi-layer stacks used by one element each go in @theme as --shadow-* entries, which is what turns them into shadow-tch06-rest and shadow-tch06-lift.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A coffee card that springs up and overshoots on hover, with an ember glow rising from below. One value carries the whole effect, so it earns a @theme entry: --ease-tch07-bounce mints ease-tch07-bounce and three elements share the same spring.
A dark edge-compute card where a multi-colour conic gradient traces a live circuit around the border on hover. This is the port's honest limit: @property and @keyframes must stay in the stylesheet, but --animate-tch08-spin turns the result into one animate-tch08-spin utility, and the play-state gating happens in the class list.
Three coloured plates that fan out and rotate on hover like spreading a deck of risograph prints. The port trades CSS's pseudo-element layers for real <div>s — more markup, but each plate's rest state, fanned state and stagger delay are now readable in one place.
A collectible trading card with a colour-dodge foil sweep, sparkle grain and a light 3D tilt. mix-blend-mode is a first-class utility here (mix-blend-color-dodge), so the port's only stylesheet residue is the sweep keyframes — exposed back as animate-tch10-sweep.
Two striped velvet halves part on hover to unveil the stage behind, gold seam and all. Nothing here needs custom CSS: the drapes are bg-[repeating-linear-gradient(…)], the part is two group-hover: translates, and the theatrical easing is one arbitrary curve.
A sticker-style promo whose top-right corner peels back to expose a hidden subscriber discount, with a soft shadow under the lifted flap. clip-path has no utility and never should — the arbitrary [clip-path:polygon(…)] with underscore-escaped values is the idiomatic answer.
A dim brick-wall bar card whose sign ignites into flickering neon on hover. Tailwind has no text-shadow colour scale worth using for four-layer tube glow, so the stacks become --text-shadow-*@theme entries — and the flicker stays a keyframe, exposed back as animate-tch13-flicker.
A phosphor-green cold-storage terminal with static scanlines, a refresh beam that sweeps top to bottom, a blinking block cursor and a CRT vignette. Four stacked overlays, two keyframes, and every one of them addressed from the markup.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A dawn-trek card whose ridgelines, sun and foreground hills drift at different rates as the cursor moves. The scene is four gradient layers — no images — and the depth contract lives in data-depth attributes the JS reads, so adding a layer means adding one number.
The restrained one: a soft light and a matching border highlight track the cursor across a near-black surface, and nothing else moves. Two pseudo-elements read the same pair of custom properties, which is why the glow and the edge never drift apart.
The simpler cousin of demo 01: one flat surface that leans toward the cursor, a specular glare that tracks the pointer, and text pushed onto four translateZ planes so the type floats above the face. Fewer moving parts, and the whole thing is one 20-line handler.
The pattern at its plainest: a hero image with a small label that slides away as an opaque detail panel rises to replace it. No zoom, no frost flourish — and that makes it the version to copy when the disclosure is the point.
The fintech variant of the flip: a platinum card front with number, holder and expiry, turning to a back face with magnetic strip and CVV. Geometry identical to demo 04 — the interesting difference is layout, and how a full-bleed strip is done with negative margin utilities.
Three stacked copies of one headline — red channel, cyan channel, clean white — desyncing into datamoshed slices on hover, with two drifting scan bars. The port keeps all three keyframe sets in CSS (they animate clip-path, which no utility can tween) and applies them from the markup.
A creative-suite card sitting inside a heavily blurred conic gradient that rotates behind an inset inner panel, so the card wears a live rainbow aura. Same @property machinery as demo 08, but the gradient is oversized and blurred rather than masked — a softer, cheaper ring.
A meditation card that rests as an organic blob and settles into a clean rounded rectangle on hover, with the icon and button reshaping in sync. Three elements morph on one spring curve, and because the curve is shared it becomes a @theme easing token.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A glowing play-orb that leans toward the cursor as if caught in a magnetic field, over a faint tech grid. The pull is 20 lines of JS writing one transform; everything visible — grid, glow, spring reset — is utilities.
A field-journal card that types its two-line entry on hover, caret blinking, on aged grain paper. The reveal is a width animation stepped by character count — which makes it the one demo where the keyframes and the copy are coupled, and the port makes that coupling visible.
A magazine card where a full-bleed red panel slides up and takes over the entire face, swapping a quiet cover for full issue details. Unlike the partial sheets in demos 03 and 18, this panel covers everything — which makes the easing choice the whole design.
A sepia Super-8 card whose grain breathes faster and stronger on hover. The noise is a data-URI SVG feTurbulence — real fractal noise, not dots — and the hover doesn't start an animation so much as speed one up.
A weather widget over a vivid colour field whose frost deepens on hover — backdrop-blur-[4px] to [22px], with saturation rising alongside. Two utilities and a transition; the port's only subtlety is naming backdrop-filter in the transition property list.
A product card that wipes into a technical blueprint — grid paper, dimension lines, tolerances — via a circle that expands from the top-right corner. clip-path: circle() animates cleanly because only the radius changes, and that single-value interpolation is what makes the wipe smooth.
Two concentric rings fire outward from the exact point the cursor enters the card, the second trailing the first by 120ms. The anchoring is the whole trick: a pointerenter handler writes the entry point into two custom properties, and the rings' origin reads them.
A BBQ card that sits grey and dim until hover, then ignites: the grayscale filter releases, a color-burn fire layer rises from below, and screen-blended embers fade in. Three stacked state changes on one trigger, all utilities.
A soft rainbow bar travels diagonally across an optics-lab card, blurred and screen-blended so it reads as light refracting through coated glass. The sweep is one rotated, blurred element animating a single left value — the simplest possible implementation of the most expensive-looking effect here.
A hard cover that swings open on a left hinge to reveal the first page inside. The hinge is the whole demo: origin-left plus a 145° rotateY, with a shadow that flips sides as the cover passes vertical.
Two blurred gradient ribbons drift across a starfield and sharpen on hover — the blur drops from 28px to 20px and the opacity climbs, so the aurora seems to gather strength. The second band reuses the first's keyframe with a longer duration and reverse direction, which is what breaks the symmetry.
FAQ
Frequently asked questions
How do the 3D tilt cards actually rotate toward the cursor — is that pure Tailwind?
The 3D tilt demos (01, 17) combine two layers. The static part is pure Tailwind: a wrapper with perspective-[1000px] sets the vanishing point and the inner card gets transform-style-preserve-3d so child layers keep their own depth. The actual lean toward the cursor is not pure CSS — a small pointer handler reads pointermove, converts the cursor's offset inside the card into two rotation values, and writes them to CSS custom properties the transform reads. Tailwind only animates on a fixed :hover state, so cursor-relative angles need that JS bridge. Depth layers like the badge and title float via translateZ through arbitrary values such as [transform:translateZ(40px)], sitting above the base at different distances — that separation is what sells the parallax rather than a flat lean.
How does the slide-up content reveal work with Tailwind group-hover?
Most reveal demos (03, 18, 25) lean on Tailwind's group and group-hover: variants. You mark the card as group, then any descendant reacts to the card being hovered: the detail sheet rests translated out of view with translate-y-full and gets group-hover:translate-y-0, while the image scales with group-hover:scale-110 inside an overflow-hidden frame so it never spills. The most common bug is forgetting the clip — without overflow-hidden on the frame, the zoomed image and the sliding panel both leak past the rounded corners. The second gotcha is easing: group-hover: only changes the end state, so nothing animates unless you also put transition and a duration- on the moving child itself, not on the group parent, which merely carries the hover signal.
How does the pricing grid dim every tier except the one I hover?
Demo 05 blurs, dims and shrinks every pricing tier except the hovered one using the has- variant plus sibling reach. The container carries logic like has-[.tier:hover]:..., so when any child is hovered the container enters a state and each tier defaults to de-emphasised unless it is the one under the pointer. In plain terms it is the CSS :has() relational selector exposed as a Tailwind variant, which is why one hover restyles its siblings with no JavaScript. The thing to watch is graceful degradation: older engines that don't support :has() ignore the whole rule, so make the resting state — every tier fully readable — the default, and keep the de-emphasis purely additive. Never hide a price or CTA behind the effect; a non-supporting browser, or a keyboard user who can't hover, must still see every tier clearly.
Why does my animated conic gradient border snap instead of rotating smoothly in Tailwind?
The animated conic border on demo 08, and the rotating aura on 21, need a registered custom property that Tailwind cannot declare on its own. You add a real @property rule in a global stylesheet typing an angle as <angle> with an initial value; only a registered angle can be interpolated, so a keyframe spinning it from 0deg to 360deg animates smoothly instead of snapping. The card then paints a conic-gradient from that variable and Tailwind handles the sizing, the inset inner panel and the blur. Skip the @property registration and the browser treats the angle as an unanimatable string, so the border just jumps between frames. Put the rule and its @keyframes in your CSS entry file — Tailwind arbitrary values can't emit an at-rule, so there's nowhere else for it to live.
Why does the back of my flip card show through mirror-reversed?
The flip cards (04 team profile, 19 credit card, 32 book cover) all rely on backface-visibility. The container gets perspective, the rotating inner element gets transform-style-preserve-3d, the two faces are absolutely stacked, the back is pre-rotated with rotate-y-180, and both faces carry backface-hidden. A back face showing through mirror-reversed, or both faces flashing mid-turn, means a missing backface-hidden on one face or a missing preserve-3d that lets the browser flatten the stack and ignore Z order. A second trap: put the transition on the rotating wrapper, not on the individual faces, or only half the card animates. Demo 32's book hinges from a left transform-origin instead of a centre spin, so set the origin explicitly or it swings from the middle like a normal flip.
How do I add the neon text-shadow glow when Tailwind has no text-shadow utility?
Tailwind ships no text-shadow utility, so the neon sign (13) and other layered glows use an arbitrary property: [text-shadow:0_0_8px_#f0f,0_0_20px_#f0f] stacks several coloured shadows into one soft halo. The flicker is a short @keyframes jittering opacity or the shadow blur, pulled in through Tailwind's animate-[name_duration] arbitrary syntax with the keyframes defined in your config or a global block. Two things bite: arbitrary values cannot contain literal spaces, so every space inside the shadow list must become an underscore, while the commas that separate stacked shadows stay as commas. And because the whole effect is a lit-up hover state, give the resting sign enough contrast on its own — a card that is nearly invisible until a pointer arrives fails every touch and keyboard visitor who never hovers it.
Are these hover effects accessible for keyboard and reduced-motion users?
Two duties run through the whole set. First, motion: the tilt, glitch (20), aurora (33) and typewriter (24) demos animate continuously or on entry, so honour prefers-reduced-motion — wrap the keyframes in a motion-reduce: variant or a media query that drops them to a static state. Second, hover is not the only input. Anything keyed to :hover or group-hover: is invisible to keyboard and touch users unless you expose it another way. If a card hides its title, price or link until hover (03, 18, 25), mirror that reveal on focus-within: and make the target a real link or <button> so it can actually take focus. Decorative layers — grain, scanlines, glow, the neon halo — should be marked aria-hidden so a screen reader skips straight to the real content.
When should I not use these card hover effects?
Skip the heavy demos when the context can't pay for them. The cursor-tracked cards (01, 15, 16, 17, 23, 29) each need a JavaScript pointermove handler, and on touch devices there is no hover and no cursor at all, so budget a solid resting state instead of shipping an effect nobody can trigger. Blur-heavy cards — the glassmorphic border (02), rotating aura (21), backdrop-blur frost (27) — are the most expensive to composite; twenty of them animating at once can drop frames on low-end hardware, so reserve those for a hero or a single featured item, not a dense catalogue. Where you can, animate only transform and opacity, which stay on the compositor; animating width, height or box-shadow forces layout and paint every frame. And never gate essential content or a purchase action behind an effect that only fires on hover.
