20 CSS Cards with Animations
Advertisement
A CSS card is a self-contained surface that groups related content into a single tappable unit. These 20 hand-coded designs are ready-to-ship cards for product grids, article tiles, profile blocks, and stat panels — copy the markup, swap your content, and ship.
01 / 20
Glassmorphism Card
Pure CSS 
Frosted glass effect using backdrop-filter blur with radial gradient background orbs and subtle white border.
02 / 20
Neon Gradient Border Card
Pure CSS 
Rainbow gradient border that fades in on hover using a background pseudo-element positioned behind the card with z-index -1.
03 / 20
3D Flip Card
Pure CSS 
Pure CSS 3D flip using transform-style: preserve-3d and rotateY with backface-visibility: hidden on both faces.
04 / 20
Animated Gradient Border Card
Pure CSS 
Continuously rotating conic-gradient border using a pseudo-element with rotate keyframes. No JavaScript needed.
05 / 20
3D Mouse Tilt Card
CSS + JS 
Tracks cursor position and applies rotateX/rotateY perspective transforms in real-time, with a dynamic radial shine that follows the mouse.
06 / 20
Cursor Spotlight Card
CSS + JS 
A soft radial glow follows the cursor position inside the card, illuminating where you look. Border subtly highlights on hover.
07 / 20
Stacked Paper Card
Pure CSS 
Two pseudo-elements behind the card rotate and offset on hover to create a fanned paper stack effect. Works beautifully on light backgrounds.
08 / 20
Holographic Shimmer Card
Pure CSS 
A white light sweeps across the card on hover using translateX animation, over a multi-color gradient background for a trading-card holographic look.
09 / 20
Slide Reveal Card
Pure CSS 
On hover the initial image content translates up and out while the description panel slides up from the bottom to fill the card.
10 / 20
Morphing Blob Card
Pure CSS 
8-point border-radius transitions between two organic blob shapes on hover with a smooth CSS transition. Pure CSS, no JavaScript.
11 / 20
Brutalist Card
Pure CSS 
Hard offset box-shadow gives a bold physical depth effect. Shadow shifts position and color on hover. Pressing moves card into the shadow.
12 / 20
Retro Terminal Card
Pure CSS 
Green-on-black terminal aesthetic with a blinking cursor using step-end animation. Perfect for dev tools, documentation, and code-related sites.
13 / 20
Neumorphic Card
Pure CSS 
Soft UI neumorphism using dual box-shadows — one light, one dark — to create the illusion of being extruded from the background surface.
14 / 20
Animated Stats Card
Pure CSS 
Dashboard metric card with an animated progress bar that grows from 0 using CSS animation. Use IntersectionObserver for scroll-trigger.
15 / 20
Profile Card
Pure CSS 
Social profile card with gradient avatar ring using CSS mask-composite trick, stats row, and a lift animation on hover.
16 / 20
Pricing Card
Pure CSS 
Pricing tier card with a top border line that draws in from the left on hover using scaleX transform, and a button that fills with color.
17 / 20
Notification Stack Card
Pure CSS 
Stacked notification items that slide right and highlight on hover. Pulsing colored dots indicate notification type.
18 / 20
Skeleton Loader Card
Pure CSS 
Animated skeleton loading state with a sweeping shimmer wave using background-position keyframes. Replace divs with real content after data loads.
19 / 20
Magazine Card
Pure CSS 
Editorial card with image area, category badge, read progress bar that fills on hover, and a smooth lift transition.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
How do I make a card component in CSS?
A card is a container with padding, a background, a border or subtle box-shadow, and a border-radius to round the corners. Group the content — image, heading, text, actions — inside it and let it size to a fixed or flexible width. Add a :hover state for lift or glow. Every card in this gallery is built from this base; open any demo's code panel to copy the markup and CSS.
How do I add a hover effect to a CSS card?
Animate the card on :hover with a transition. Common card hover effects: a lift using transform: translateY(-6px) with a deeper box-shadow, a 3D tilt with perspective and rotateX/rotateY, a cursor spotlight tracking a radial-gradient, or an animated gradient border. The 3D Mouse Tilt and Cursor Spotlight demos show copy-paste versions of these effects.
Do these CSS cards need JavaScript?
No — all 20 card designs are pure CSS. Even the 3D tilt and cursor-spotlight effects use CSS-only techniques (transform, perspective, and pointer-tracking via modern CSS) so there's nothing to wire up. Drop the HTML and CSS in and the card works.
How do I make a flip card in pure CSS?
Use a container with perspective, an inner wrapper with transform-style: preserve-3d, and two faces (front and back) positioned on top of each other with backface-visibility: hidden. On :hover, rotate the inner wrapper 180deg — the back face turns into view. The 3D Flip Card demo here is a ready-to-copy example.
Are these CSS cards responsive and free to use?
Yes. Every card is responsive — it adapts to its container and works in a CSS grid or flex layout at any width. All 20 designs are MIT licensed and free for personal and commercial projects, with no attribution required.
Related collections
22 CSS Button Group Designs
22
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
button group css button group segmented control
Responsive
43 CSS Button Designs
43
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
buttons hover animation
Responsive
23 CSS Checkboxes
23
23 hand-crafted CSS checkboxes — toggles, glow, draw stroke, bouncy pop, glassmorphism, neumorphic, liquid fill, ripple, confetti and more. Mostly pure CSS, copy-paste ready.
checkboxes forms animation
Responsive