Cards & Layouts
Creative cards, Bento grids and morphing layouts.
3D Tilt Effect
The card tilts based on the mouse position.
Glassmorphism
Frosted glass effect with backdrop-filter blur.
Spotlight Effect
Light that follows the cursor across the card.
Animated Border
Continuously animated gradient border.
Flip Card
3D flip on hover.
Hover Lift
Lift and scale on hover with drop shadow.
Morphing Shape
Border-radius that changes continuously.
Glow Pulse
Glowing halo that pulses continuously.
Stacked Cards
Cards fan out on hover.
Card Morph
The card expands and reveals its content on click.
Parallax Layers
Depth effect with multiple 3D layers.
Shine Effect
Shiny reflection that sweeps across the card on hover.
Neumorphic
Soft UI style with gentle shadows and subtle reliefs.
Claymorphism
3D clay style with organic depth effect.
Content Reveal
Hidden content progressively reveals on hover.
Image Zoom
The image zooms in within the card on hover.
Holographic
Continuously animated rainbow holographic effect.
Basic Bento
Simple bento grid with hover animations on each cell. Scale and glow effect.
Bento with Images
Cells with gradient backgrounds and overlay that appears on hover.
Animated Bento
Cells appear in cascade with a stagger effect on load.
Interactive Bento
Click a cell to expand it. Click again to collapse it.
Bento with Stats
Statistics display with animated number counters on hover.
Hover Reveal Bento
Content reveals on hover with a smooth transition.
Bento Card Stack
Stacked cards that fan out on hover.
Responsive Bento
Grid that elegantly reorganizes. Resize the container to see the effect.
Grid to List Toggle
Items morphing between grid and list layout with smooth CSS grid transitions.
Card Expand to Full
Card that expands from its position to full screen with position/size transition.
Tab Content Morph
Tab panel with morphing crossfade and content position transition.
Masonry to Grid
Items that animate from an organic masonry layout to a strict grid and back.
Sidebar to Overlay
Sidebar that transforms into a full-screen overlay with smooth content reflow.
Split Screen Morph
Two-panel layout morphing between 50/50, 70/30, and single panel with CSS flex transitions.
Stacked to Spread
Stacked cards that spread into a grid with elastic cubic-bezier animation.
Gallery to Slideshow
Image gallery morphing into full-screen slideshow with position animation and navigation.
Holographic Card 3D
Iridescent holographic card on hover, premium trading-card style. conic-gradient + blend modes + 3D transform. Zero JavaScript.
Shape-Aware Shadows
Shadows, borders and outlines that hug non-rectangular shapes with border-shape: pointed tag, notched ticket, chat bubble. Automatic drop-shadow fallback on every browser.
💡 Perfect for: promo badges, event tickets, chat bubbles, pointed tooltips, pricing cards.
Holo Tilt & Glare
Pointer-driven holographic card: 3D tilt (rAF + lerp), iridescent glare tracking the cursor and a foil layer in inverse parallax — the depth of a real holo card. Elastic return on leave, reduced-motion fallback.
💡 Ideal for: premium loyalty cards, player badges, invitations, collectibles.
Foil Shimmer
Stamped holographic foil in pure CSS: three text-clipped layers — animated iridescent gradient, metal grain, specular sweep. Foil-border pill variant included. Hover speeds up the shimmer.
💡 Ideal for: premium badges, pricing card headlines, limited-edition labels.
Holographic Sticker Peel
Die-cut holographic sticker that peels off: hover lifts the corner, click peels it three-quarters away. The back exposes grey glue and inverted iridescence — two interpolated clip-paths, growing shadow, glue-stretch.
💡 Ideal for: e-commerce promo stickers, “new” badges, event tags.
Prismatic Refraction Card
Chromatic-dispersion glass: the edges split light into red/cyan fringes while a rainbow band sweeps the surface following the cursor. rAF + lerp 3D tilt, saturated backdrop-filter, scrim-guaranteed readability.
💡 Ideal for: premium pricing cards, landing heroes, featured-capability widgets.
Holo Pack Opening
TCG-Pocket-style booster opening: a spark cuts the top of the wrapper along a glowing line, the strip tears away and flutters off, and the cards slide out through the opening in cascade. Then inspection — auto zoom, click to flip (3D flip with a real back), ‹ › and keyboard navigation. 1 to N cards, replayable (fresh pack), zero dependencies.
💡 Ideal for: reward reveals, gift cards, loot boxes, gamified onboarding.
Page Curl Reveal
Hover: the corner curls like a real page. Click: it peels away entirely to reveal the hidden content, click again to lay it back. Animated gradient fold, shadow and clip-path, accessible toggle.
💡 Perfect for: revealing a promo code, a surprise, a card back, a content teaser.
Advent Calendar
Interactive advent calendar: 24 doors that open on a 3D hinge and reveal a bouncing surprise behind them, with the current day's door highlighted. Surprises and number of doors are customisable.
💡 Perfect for: December campaigns, gamification, loyalty programs, daily contests, progressive reveals, festive e-commerce.
Ribbon Bow Wrap
Wraps a card in an animated golden ribbon with a knotting bow on hover. Click to lock the wrapping. Ribbon colour and card content are fully customisable — works on any card or offer.
💡 Perfect for: gift cards, Christmas offers, greeting messages, product highlights, digital packaging.
How do you create cards that engage your users? These 33 CSS card components cover every style: 3D tilt on hover, flip cards, hover effects, glassmorphism, expandable cards and animated grid layouts. Each card is responsive and accessible.