If you want to create a stylish profile card UI that combines modern design trends with interactive elements, this Neumorphism Profile Card is a perfect choice. Neumorphism, also known as Soft UI, gives a soft shadowed appearance to elements, making them look as if they are embossed or extruded from the background.
This design is perfect for developer portfolios, personal websites, social media widgets or even dashboard user cards. It provides not just a minimal look but also interactive sections like ratings, social handles and action buttons.
Structure of the Profile Card
The card layout is designed to highlight a profile image, user details, ratings and social links. It includes:
<div class="main-container flex-c">
<div class="card">
<div class="header">
<span class="fas fa-arrow-left"></span>
<span class="fas fa-ellipsis-v"></span>
</div>
<div class="profile-img flex-c">
<img src="https://images.unsplash.com/photo-1568604032475-10f1a56527c9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8bWFufHx8fHx8MTcwMjIwMDg3OQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Profile Picture">
</div>
<div class="name">John Doe</div>
<div class="about">Full-stack Web Developer</div>
<div class="rating">
<p class="stars">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</p>
<p class="rating-count">30.7K Ratings</p>
</div>
<div class="social-handles">
<a href="#"><span class="fab fa-youtube"></span></a>
<a href="#"><span class="fab fa-instagram"></span></a>
<a href="#"><span class="fab fa-github"></span></a>
<a href="#"><span class="fab fa-linkedin"></span></a>
<a href="#"><span class="fab fa-twitter"></span></a>
</div>
<div class="btns">
<button class="follow-btn">Follow</button>
<button class="hire-btn">Hire</button>
</div>
<div class="footer">
<div class="followers">
<span class="fas fa-user"></span>
<span class="follow-count">92K</span>
</div>
<div class="comments">
<span class="fas fa-comment"></span>
<span class="comment-count">420K</span>
</div>
<div class="shares">
<span class="fas fa-share"></span>
<span class="share-count">57K</span>
</div>
</div>
</div>
</div>- Header Section – Contains navigation icons such as a back arrow and menu dots.
- Profile Image – A centered circular image with a soft shadow effect.
- User Information – Displays the name and role (like Full-stack Web Developer).
- Ratings – A star rating system with the total number of ratings shown below.
- Social Media Handles – Clickable icons for YouTube, Instagram, GitHub, LinkedIn and Twitter.
- Action Buttons – Two key actions: Follow and Hire.
- Footer Stats – Displays followers, comments and shares in a compact way.
This setup makes the card not only visually appealing but also highly functional.
Styling with Neumorphism
The neumorphic design is achieved by applying soft shadows and highlights to the card, buttons and icons. Key design elements include:
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css");
body {
background: #212121;
}
.flex-c {
display: flex;
align-items: center;
justify-content: center;
}
.main-container {
min-height: 100vh;
min-width: 450px;
}
a {
text-decoration: none;
}
a,
.card,
button {
color: white;
}
.card,
.social-handles span,
.btns button,
.profile-img {
box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
}
.card {
width: 400px;
display: flex;
padding: 15px;
text-align: center;
border-radius: 10px;
background: #191A1E;
flex-direction: column;
font-family: 'calibri';
}
.header {
display: flex;
justify-content: space-between;
}
.header span {
padding: 10px;
}
.profile-img {
width: 140px;
height: 140px;
border-radius: 50%;
align-self: center;
margin-bottom: 12px;
}
.profile-img img {
width: 120px;
border-radius: 50%;
}
.name {
font-size: 20px;
font-weight: bold;
}
.rating {
margin: 8px 0 35px;
}
.stars span {
color: rgb(255, 171, 14);
}
.stars {
font-size: 28px;
}
.rating-count {
font-size: 14px;
}
.social-handles span {
margin: 0 5px;
padding: 12px;
font-size: 14px;
cursor: pointer;
border-radius: 50%;
}
.btns {
display: flex;
gap: 20px;
margin: 30px 5px;
}
.follow-btn,
.hire-btn {
width: 50%;
cursor: pointer;
padding: 8px 10px;
font-size: 16px;
border-radius: 20px;
background: #191A1E;
border: 1px solid rgba(17, 17, 17, 0.526);
}
.follow-btn:hover,
.hire-btn:hover,
.social-handles span:hover {
box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
}
.footer {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.footer .fas {
margin-right: 2px;
}- Background Colors – Dark background (#191A1E) to enhance the glowing effect.
- Box Shadows – Both inset and outset shadows are used for the card and buttons to create depth.
- Circular Profile Image – Perfectly rounded and softly highlighted.
- Hover Effects – Buttons and icons change their shadow styles on hover, making the UI feel interactive.
This styling technique makes the card look elegant and gives users a tactile feel, as if the elements can be pressed in or popped out.
Use Cases of Neumorphism Profile Card
This Neumorphism Profile Card UI can be used in multiple ways, such as:
- Personal portfolio websites for developers, designers or freelancers.
- Team member profiles in company websites.
- User widgets in dashboards or apps.
- Social media profile previews.
It’s clean, modern and provides a professional impression.
The Neumorphism Profile Card is a creative way to present user information in a visually appealing and interactive format. Its minimalistic look, combined with hover effects and social integration, makes it an excellent addition to any personal or professional project.
Whether you’re building a portfolio site or adding a profile section to a web app, this design will help your interface stand out while maintaining simplicity.
