Pure CSS Cards
CSS cards are boxed content blocks for products, profiles, articles and pricing, with shadows, flips and hover lifts created in pure CSS.
27 free examples, most liked first. Click one to preview it and copy the code.
Radial Hover Fill Card
by @admin · Cards
Peek Card Carousel
by @admin · Cards
Tidal Wave Card Background
by @admin · Cards
Gradient Frame Glow Border
by @admin · Border
Glass Profile Card
by @admin · Cards
Hexagon Profile Badge
by @admin · Cards
Corner Ribbon Badge
by @admin · Cards
Receipt Zigzag Edge
by @admin · Cards
Stacked Paper Card
by @admin · Cards
Radio Button Choice Cards
by @admin · Cards
Hover Flip Card 3D
by @admin · Cards
Caption Slide Overlay Card
by @admin · Cards
Notched Coupon Ticket
by @admin · Cards
Expanding Card With Grid Rows
by @admin · Accordion
Zoom On Hover Card
by @admin · Cards
Pricing Comparison Table
by @admin · Cards
Code Snippet Window
by @admin · Cards
Spinning Gradient Border
by @admin · Border
Double Outline Focus Card
by @admin · Border
Hover Fan Card Stack
by @admin · Cards
Testimonial Quote Card
by @admin · Cards
Stat Metric Card
by @admin · Cards
Hexagon Stat Badge
by @admin · Cards
Pricing Tier Card
by @admin · Cards
Calendar Event Badge
by @admin · Cards
Ticket Stub Perforation
by @admin · Border
Team Member Card
by @admin · Cards
Learn how it works
Read the step-by-step guide: How to Make a 3D Flip Card in Pure CSS
Cards FAQ
How do I make a flip card in CSS?
Stack a front and a back face, hide the back with backface-visibility, and rotate the card on :hover with a 3D transform. See the card examples here for working code.
How do I use these pure CSS cards?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.