Every card pattern you'll use in real projects — basic cards, hover effects, glassmorphism, profile, pricing, product, stats and creative cards. Live preview + copy-ready CSS for each one.
A basic CSS card needs four things: background color, border-radius for rounded corners, padding for inner spacing, and box-shadow for depth. Example: .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } Add overflow: hidden if the card has an image at the top.
Use transition and transform on hover: .card { transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } This lifts the card upward. Add will-change: transform for GPU acceleration on card grids.
Use border-top: 4px solid #6366f1 on the card, or a pseudo-element for gradients: .card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, #6366f1, #a78bfa); border-radius: 4px 4px 0 0; } Remember to set position: relative on the card.
Apply a semi-transparent background and backdrop-filter: blur(): .glass-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; } The blur effect only works over other content — place a colorful gradient or image behind the card.
For subtle elevation: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04). For medium depth: 0 4px 16px rgba(0,0,0,0.12). For floating cards: 0 8px 32px rgba(0,0,0,0.18). On dark mode, skip shadows and use a border instead: border: 1px solid rgba(255,255,255,0.07) — shadows are invisible on dark backgrounds.