Free CSS Card Components: Glassmorphism and Dark Mode 2026

#css #design #frontend

Free CSS Card Components 2026

ProofMatcher has free CSS card components with hover animations, glassmorphism effects, and dark mode designs — copy-paste HTML & React.

Glassmorphism Card

.glass-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 28px;
  transition: transform .3s, box-shadow .3s;
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
}

Dark Gradient Card

.dark-card {
  background: linear-gradient(135deg, #1a0a0a, #111);
  border: 1px solid rgba(229,62,62,0.15);
  border-radius: 16px;
  padding: 24px;
  transition: border-color .25s;
}
.dark-card:hover { border-color: rgba(229,62,62,0.35); }

3D Tilt Card (CSS Only)

.tilt-card {
  background: #111;
  border-radius: 16px;
  padding: 24px;
  transform-style: preserve-3d;
  transition: transform .3s;
}
.tilt-card:hover {
  transform: perspective(800px) rotateX(4deg) rotateY(-4deg) scale(1.02);
}

Profile Card

<div class="profile-card">
  <img src="avatar.jpg" alt="User">
  <h3>Jane Doe</h3>
  <p>UI Designer</p>
  <div class="tags"><span>React</span><span>CSS</span></div>
</div>

.profile-card {
  background: #111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  transition: transform .3s;
}
.profile-card img { width:72px; height:72px; border-radius:50%; object-fit:cover; }
.profile-card h3 { color:#fff; margin:12px 0 4px; }
.profile-card p { color:rgba(255,255,255,.45); font-size:14px; }
.profile-card:hover { transform:translateY(-4px); }