How to Create Beautiful Profile Card Designs in CSS

<div class="profile-card">
  <div class="profile-header">
    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=400&q=80" alt="Profile Picture" class="profile-img">
  </div>
  <div class="profile-body">
    <h2 class="profile-name">Alex Johnson</h2>
    <p class="profile-title">Frontend Developer</p>
    <p class="profile-bio">Creating beautiful and intuitive web experiences. Passionate about UI/UX and CSS.</p>
    <div class="profile-socials">
      <a href="#" class="social-icon">In</a>
      <a href="#" class="social-icon">Tw</a>
      <a href="#" class="social-icon">GH</a>
    </div>
    <button class="profile-btn">Follow</button>
  </div>
</div>

body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #e2e8f0; font-family: 'Inter', sans-serif; }

.profile-card {
  width: 320px;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-10px);
}

.profile-header {
  height: 120px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  position: relative;
  display: flex;
  justify-content: center;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  object-fit: cover;
  position: absolute;
  bottom: -50px;
}

.profile-body {
  padding: 60px 20px 30px;
  text-align: center;
}

.profile-name {
  margin: 0;
  font-size: 1.5rem;
  color: #1e293b;
}

.profile-title {
  margin: 5px 0 15px;
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

.profile-bio {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 25px;
}

.profile-socials {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}

.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  background-color: #f1f5f9;
  color: #3b82f6;
  text-decoration: none;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: #3b82f6;
  color: #ffffff;
}

.profile-btn {
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
}

.profile-btn:hover { background-color: #2563eb; }

// Pure CSS!