Card Components
Modern card layouts — glass, dark, gradient, neumorphic and more. Click any to copy code.
22 cardsGlass Card
Frosted glass effect with backdrop blur and translucent background.
Elevated Card
Layered box shadows create a sense of physical elevation above the surface.
Dark Surface Card
Subtle dark surface with soft border and refined typography for dark themes.
Gradient Border Card
Vivid gradient border using a CSS pseudo-element technique.
Neon Glow Card
Electric neon accent border with glowing ambient light effect.
Outline Card
Clean outlined card with transparent background. Works on any surface.
Neumorphic Card
Soft UI style with dual shadows creating an extruded look.
Frosted Dark Card
Dark glassmorphism with layered blur for immersive backgrounds.
Stat Card
Dashboard-style stat card with label, value, and color accent.
Profile Card
User profile card with avatar, name, role, and action buttons.
Pricing Card
SaaS pricing card with plan name, price, features, and CTA button.
Notification Card
Compact notification-style card with icon, message, and timestamp.
Hover Lift Card
Card that smoothly lifts and gains shadow on hover for tactile feel.
Tag Card
Content card with title, description, and category tag chips.
Image Card
Classic content card with image area, title, excerpt, and read more link.
CTA Card
Call-to-action card with headline, subtext and a prominent action button.
Inset Depth Card
Carved-in appearance using inset shadows for a premium tactile feel.
Skeleton Loader Card
Animated skeleton placeholder card for loading states.
Feature Card
Marketing feature card with large icon, bold heading, and description.
Shimmer Border Card
Card with an animated gradient border shimmer effect on hover.
Minimal White Card
Clean white card with hairline border and subtle shadow. Light theme staple.
Team Member Card
Team member card with avatar, name, role, and social links.