Neumorphic Profile Card HTML CSS Template

1,578 alejandrokundrah

Open In Editor Publish Your Code

Recommended

11 May 2026

Movie Streaming Website HTML Template

22 September 2025

HTML Neuron Animation Snippet

19 November 2025

HTML Admin Dashboard Template with CSS & Charts

HTML

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e0e0e0;
  font-family: Arial, sans-serif;
}

.profile-card {
  width: 300px;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: 20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.profile-card:hover {
  box-shadow: 10px 10px 30px #bebebe,
             -10px -10px 30px #ffffff;
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 20px;
  overflow: hidden;
  box-shadow: inset 5px 5px 10px #bebebe,
              inset -5px -5px 10px #ffffff;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info h2 {
  margin: 10px 0;
  color: #333;
}

.profile-info p {
  color: #666;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.social-link {
  text-decoration: none;
  color: #333;
  padding: 8px 15px;
  border-radius: 20px;
  background: #e0e0e0;
  box-shadow: 5px 5px 10px #bebebe,
             -5px -5px 10px #ffffff;
  transition: all 0.3s ease;
}

.social-link:hover {
  box-shadow: inset 5px 5px 10px #bebebe,
              inset -5px -5px 10px #ffffff;
}

#contact-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  background: #e0e0e0;
  color: #333;
  box-shadow: 5px 5px 10px #bebebe,
             -5px -5px 10px #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

#contact-btn:hover {
  box-shadow: inset 5px 5px 10px #bebebe,
              inset -5px -5px 10px #ffffff;
}

JS