Originally published byDev.to
Cards are the most common UI component on the web. Yet most developers use the same basic box-shadow card everywhere. This guide covers 40 CSS card designs — from the simplest foundation to advanced glassmorphism, 3D flip, neon glow, and mesh gradient cards.
üîó Full collection with live demos: uixdraft.com/css-card-design
The Card Foundation
Every card is built on four properties:
.card {
background: #fff; /* 1. background */
border-radius: 12px; /* 2. rounded corners */
padding: 24px; /* 3. inner spacing */
box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* 4. depth */
}
/* Dark mode */
.dark .card {
background: #0d1117;
border: 1px solid rgba(255,255,255,.07);
/* Skip box-shadow — invisible on dark backgrounds */
}
1. Card with Image
.img-card {
border-radius: 12px;
overflow: hidden; /* clips image to border-radius */
border: 1px solid rgba(255,255,255,.07);
}
.img-card img {
width: 100%;
height: 200px;
object-fit: cover;
display: block; /* removes bottom gap */
}
.img-card-body { padding: 20px; }
2. Lift on Hover
The most satisfying card interaction — 4px lift:
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
will-change: transform;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
3. Glow on Hover
Coloured border and outer glow — dark UI favourite:
.card {
border: 1px solid rgba(255,255,255,.07);
transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
border-color: rgba(167,139,250,.6);
box-shadow:
0 0 0 1px rgba(167,139,250,.2),
0 0 20px rgba(167,139,250,.15);
}
4. 3D Flip Card
.flip-wrapper {
perspective: 600px;
width: 300px; height: 200px;
}
.flip-inner {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform 0.5s ease;
}
.flip-wrapper:hover .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
position: absolute; inset: 0;
border-radius: 12px;
backface-visibility: hidden;
}
.flip-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #6366f1, #a78bfa);
}
5. Glassmorphism Card
.glass-card {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 24px;
}
/* Must sit over colorful content for the blur to show */
6. Gradient Border Card
.gradient-border-wrap {
background: linear-gradient(135deg, #a78bfa, #38bdf8);
border-radius: 14px;
padding: 2px; /* border thickness */
}
.gradient-border-card {
background: #0d1117;
border-radius: 12px; /* 14 - 2 = 12 */
padding: 24px;
}
7. Pricing Card
.pricing-card {
border-radius: 14px;
padding: 28px;
border: 1px solid rgba(255,255,255,.07);
}
/* Featured variant */
.pricing-card.featured {
border-color: rgba(167,139,250,.4);
background: rgba(167,139,250,.05);
}
.price { font-size: 40px; font-weight: 800; }
.price-period { font-size: 14px; color: rgba(255,255,255,.4); }
.features { list-style: none; margin: 20px 0; }
.features li {
display: flex; align-items: center;
gap: 8px; padding: 6px 0;
}
.check { color: #34d399; }
.cta-btn {
width: 100%; padding: 12px; border-radius: 10px;
background: #a78bfa; color: #06080f;
font-weight: 700; border: none; cursor: pointer;
}
8. KPI Stat Card
.stat-card {
border-radius: 12px; padding: 20px;
border: 1px solid rgba(255,255,255,.07);
}
.stat-icon { font-size: 20px; margin-bottom: 12px; }
.stat-value { font-size: 28px; font-weight: 800; }
.stat-label { font-size: 12px; color: rgba(255,255,255,.4); }
.stat-trend.up { color: #34d399; font-weight: 700; }
.stat-trend.down { color: #f87171; font-weight: 700; }
9. Progress Card
.progress-track {
height: 6px;
background: rgba(255,255,255,.06);
border-radius: 3px; overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #a78bfa, #38bdf8);
border-radius: 3px;
/* Set width dynamically via CSS variable or inline style */
width: var(--progress, 73%);
}
10. Testimonial Card
.testimonial {
border-radius: 14px; padding: 24px;
border: 1px solid rgba(255,255,255,.07);
}
.quote-mark {
font-size: 48px; line-height: 1;
color: #a78bfa; margin-bottom: 8px;
}
.quote-text {
font-style: italic;
color: rgba(255,255,255,.7);
line-height: 1.7; margin-bottom: 20px;
}
.quote-author { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 36px; height: 36px; border-radius: 50%; }
.stars { color: #fbbf24; }
11. Neon Glow Card
.neon-card {
border: 1px solid rgba(167,139,250,.5);
border-radius: 14px;
padding: 24px;
background: #0d1117;
box-shadow:
0 0 0 1px rgba(167,139,250,.1),
0 0 24px rgba(167,139,250,.2),
0 0 48px rgba(167,139,250,.08);
}
12. Timeline Card
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
content: ''; position: absolute;
left: 8px; top: 0; bottom: 0; width: 1px;
background: rgba(255,255,255,.08);
}
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item::before {
content: ''; position: absolute;
left: -24px; top: 6px;
width: 10px; height: 10px; border-radius: 50%;
background: #a78bfa;
box-shadow: 0 0 8px rgba(167,139,250,.6);
}
.timeline-card {
border-radius: 10px; padding: 14px 16px;
border: 1px solid rgba(255,255,255,.07);
}
Box-Shadow Guide for Cards
| Situation | Shadow |
|---|---|
| Light mode subtle | 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04) |
| Light mode medium | 0 4px 16px rgba(0,0,0,0.12) |
| Light mode floating | 0 8px 32px rgba(0,0,0,0.18) |
| Dark mode | Use border: 1px solid rgba(255,255,255,.07) instead |
| Hover state | 0 12px 32px rgba(0,0,0,0.25) |
All 40 Card Designs
The full collection — including mesh gradient, neumorphism, alert cards, download cards, product cards, and animated hover effects — is available with live previews at:
üëâ uixdraft.com/css-card-design
More CSS references: CSS Buttons (50 styles) · CSS Navbars (30 patterns) · CSS Grid (35 patterns)
🇺🇸
More news from United StatesUnited States
NORTH AMERICA
Related News
Secret Claude Tracker Shocks Users After Anthropic's Anti-Surveillance Stance
12h ago
EV Batteries Defy Expectations, Last Hundreds of Thousands of Miles
1d ago
GBase 8a Performance Anomaly Case Study: How a Single Parameter Change Sparked a Chain Reaction
1d ago
Who Else Has Inherited a Codebase With Zero Comments and a Prayer?
1d ago
完美的平庸
4h ago