Playground · 20 demos
CSS Cards Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Cards collection for the gallery view with code panels.
01 Pure CSS
Glassmorphism Card
Frosted glass effect using backdrop-filter blur with radial gradient background orbs and subtle white border.
Open
02 Pure CSS
Neon Gradient Border Card
Rainbow gradient border that fades in on hover using a background pseudo-element positioned behind the card with z-index -1.
Open
03 Pure CSS
3D Flip Card
Pure CSS 3D flip using transform-style: preserve-3d and rotateY with backface-visibility: hidden on both faces.
Open
04 Pure CSS
Animated Gradient Border Card
Continuously rotating conic-gradient border using a pseudo-element with rotate keyframes. No JavaScript needed.
Open
05 CSS + JS
3D Mouse Tilt Card
Tracks cursor position and applies rotateX/rotateY perspective transforms in real-time, with a dynamic radial shine that follows the mouse.
Open
06 CSS + JS
Cursor Spotlight Card
A soft radial glow follows the cursor position inside the card, illuminating where you look. Border subtly highlights on hover.
Open
07 Pure CSS
Stacked Paper Card
Two pseudo-elements behind the card rotate and offset on hover to create a fanned paper stack effect. Works beautifully on light backgrounds.
Open
08 Pure CSS
Holographic Shimmer Card
A white light sweeps across the card on hover using translateX animation, over a multi-color gradient background for a trading-card holographic look.
Open
09 Pure CSS
Slide Reveal Card
On hover the initial image content translates up and out while the description panel slides up from the bottom to fill the card.
Open
10 Pure CSS
Morphing Blob Card
8-point border-radius transitions between two organic blob shapes on hover with a smooth CSS transition. Pure CSS, no JavaScript.
Open
11 Pure CSS
Brutalist Card
Hard offset box-shadow gives a bold physical depth effect. Shadow shifts position and color on hover. Pressing moves card into the shadow.
Open
12 Pure CSS
Retro Terminal Card
Green-on-black terminal aesthetic with a blinking cursor using step-end animation. Perfect for dev tools, documentation, and code-related sites.
Open
13 Pure CSS
Neumorphic Card
Soft UI neumorphism using dual box-shadows — one light, one dark — to create the illusion of being extruded from the background surface.
Open
14 Pure CSS
Animated Stats Card
Dashboard metric card with an animated progress bar that grows from 0 using CSS animation. Use IntersectionObserver for scroll-trigger.
Open
15 Pure CSS
Profile Card
Social profile card with gradient avatar ring using CSS mask-composite trick, stats row, and a lift animation on hover.
Open
16 Pure CSS
Pricing Card
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.
Open
17 Pure CSS
Notification Stack Card
Stacked notification items that slide right and highlight on hover. Pulsing colored dots indicate notification type.
Open
18 Pure CSS
Skeleton Loader Card
Animated skeleton loading state with a sweeping shimmer wave using background-position keyframes. Replace divs with real content after data loads.
Open
19 Pure CSS
Magazine Card
Editorial card with image area, category badge, read progress bar that fills on hover, and a smooth lift transition.
Open
20 CSS + JS
Interactive Vote Card
Poll card with clickable options that fill in with a progress bar and show percentage. Selected option persists state via JS class toggle.
Open