How do I customize card colors?

For Bootstrap, override CSS variables or utility classes. For Tailwind, swap bg-, border-, and text- utilities. All snippets include the source CSS or classes in the code block.

Free Cards Snippets — 92+ Copy-Paste Examples (Bootstrap & More)

#social#claymorphism+3

Molten Copper Social Feed Card with Claymorphic Buttons

Experience a captivating social feed card with engaging motion and a vibrant claymorphic design, offering an easy-to-use engagement rail and share options.

3View snippet

#neumorphism#drag-reorder+3

Ocean Depth Neumorphic Kanban Lane with Draggable Tasks

Dive into a visually immersive kanban lane utilizing oceanic hues and neumorphic design, enabling intuitive card drag-and-drop for enhanced task reordering.

2View snippet

#aurora mint#profile card+3

Aurora Mint Kinetic Team Profile Card with Live Role Badge

Experience dynamic team profiles with expressive motion and role highlights. Engage with quick actions via kinetic animations, offering an interactive user experience.

0View snippet

#profile-card#minimal-editorial+3

Electric Forest Executive Profile Card with Role Badge and Quick Actions

Showcase your team member profiles with elegant design, smooth motion, and vibrant accents that highlight their role and actions in an electrifying way.

0View snippet

#neumorphism#deep-space+3

Deep Space Team Profile Card with Role Badge and Orbit Actions

Dive into a celestial-themed team card with neumorphic touchpoints, vibrant animated glow orbs, and intuitive action triggers—perfect for showcasing key team members with style.

2View snippet