Cards & Layouts
Creative cards, Bento grids and morphing layouts.
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.
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.
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.