Modelo HTML CSS de cartão de perfil neumórfico

1010 alejandrokundrah

Abrir no Editor Video Publique Seu Código

Modelo HTML CSS de cartão de perfil neumórfico

Recomendado

21 July 2025

Entrada de upload de arquivo com ícone SVG

4 September 2025

Trecho HTML de animação de círculo CSS

18 December 2025

Código-fonte HTML5 do jogo Monkey Mart

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;
}

Recomendado

Entrada de upload de arquivo com ícone SVG

Trecho HTML de animação de círculo CSS

Código-fonte HTML5 do jogo Monkey Mart

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS