Hello readers, Today in this blog you'll learn how to create Neumorphism Profile Card UI Design using only HTML & CSS. Earlier I have shared many blogs on neumorphism or neomorphic effects and now I'm going to create a Profile Card with Neumorphism Effect.
A profile card is a card that carries saved profile content. Profile Cards let you select profile values consistently over all items on your website. Neumorphism, or soft UI, is a visible style that mixes background colors, shapes, gradients, highlights, and shadows.
In this program [Neumorphism Profile Card UI Design], there is a profile card with a neomorphic effect. This card contains a profile image, social media buttons, and some social media info. When you hover on particular social media buttons, there is shown a neomorphic effect. This card is fully based on HTML & CSS.
You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes. Click here to download code files.
You might like this:
Responsive Testimonial Section
Pure CSS 3d Flip Card on Hover
Responsive Owl-carousel Card Slider
Profile UI Design with Hover Effect
HTML CODE:
<!DOCTYPE html> <!-- Created By CodingNepal - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <title>Neumorphism Profile Card | CodingNepal</title> --> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <body> <div class="wrapper"> <div class="img-area"> <div class="inner-area"> <img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""> </div> </div> <div class="icon arrow"><i class="fas fa-arrow-left"></i></div> <div class="icon dots"><i class="fas fa-ellipsis-v"></i></div> <div class="name">CodingNepal</div> <div class="about">Designer & Developer</div> <div class="social-icons"> <a href="#" class="fb"><i class="fab fa-facebook-f"></i></a> <a href="#" class="twitter"><i class="fab fa-twitter"></i></a> <a href="#" class="insta"><i class="fab fa-instagram"></i></a> <a href="#" class="yt"><i class="fab fa-youtube"></i></a> </div> <div class="buttons"> <button>Message</button> <button>Subscribe</button> </div> <div class="social-share"> <div class="row"> <i class="far fa-heart"></i> <i class="icon-2 fas fa-heart"></i> <span>20.4k</span> </div> <div class="row"> <i class="far fa-comment"></i> <i class="icon-2 fas fa-comment"></i> <span>14.3k</span> </div> <div class="row"> <i class="fas fa-share"></i> <span>12.8k</span> </div> </div> </div> </body> </html> CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #ecf0f3; } .wrapper, .wrapper .img-area, .social-icons a, .buttons button{ background: #ecf0f3; box-shadow: -3px -3px 7px #ffffff, 3px 3px 5px #ceced1; } .wrapper{ position: relative; width: 350px; padding: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .wrapper .icon{ font-size: 17px; color: #31344b; position: absolute; cursor: pointer; opacity: 0.7; top: 15px; height: 35px; width: 35px; text-align: center; line-height: 35px; border-radius: 50%; font-size: 16px; } .wrapper .icon i{ position: relative; z-index: 9; } .wrapper .icon.arrow{ left: 15px; } .wrapper .icon.dots{ right: 15px; } .wrapper .img-area{ height: 150px; width: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .img-area .inner-area{ height: calc(100% - 25px); width: calc(100% - 25px); border-radius: 50%; } .inner-area img{ height: 100%; width: 100%; border-radius: 50%; object-fit: cover; } .wrapper .name{ font-size: 23px; font-weight: 500; color: #31344b; margin: 10px 0 5px 0; } .wrapper .about{ color: #44476a; font-weight: 400; font-size: 16px; } .wrapper .social-icons{ margin: 15px 0 25px 0; } .social-icons a{ position: relative; height: 40px; width: 40px; margin: 0 5px; display: inline-flex; text-decoration: none; border-radius: 50%; } .social-icons a:hover::before, .wrapper .icon:hover::before, .buttons button:hover:before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; background: #ecf0f3; box-shadow: inset -3px -3px 7px #ffffff, inset 3px 3px 5px #ceced1; } .buttons button:hover:before{ z-index: -1; border-radius: 5px; } .social-icons a i{ position: relative; z-index: 3; text-align: center; width: 100%; height: 100%; line-height: 40px; } .social-icons a.fb i{ color: #4267B2; } .social-icons a.twitter i{ color: #1DA1F2; } .social-icons a.insta i{ color: #E1306C; } .social-icons a.yt i{ color: #ff0000; } .wrapper .buttons{ display: flex; width: 100%; justify-content: space-between; } .buttons button{ position: relative; width: 100%; border: none; outline: none; padding: 12px 0; color: #31344b; font-size: 17px; font-weight: 400; border-radius: 5px; cursor: pointer; z-index: 4; } .buttons button:first-child{ margin-right: 10px; } .buttons button:last-child{ margin-left: 10px; } .wrapper .social-share{ display: flex; width: 100%; margin-top: 30px; padding: 0 5px; justify-content: space-between; } .social-share .row{ color: #31344b; font-size: 17px; cursor: pointer; position: relative; } .social-share .row::before{ position: absolute; content: ""; height: 100%; width: 2px; background: #e0e6eb; margin-left: -25px; } .row:first-child::before{ background: none; } .social-share .row i.icon-2{ position: absolute; left: 0; top: 50%; color: #31344b; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .row:nth-child(1):hover i.fa-heart, .row:nth-child(2):hover i.fa-comment{ opacity: 1; pointer-events: auto; } 
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of Best International Schools in Bangalore. Would love to see more examples like this for other types of elements. Keep up the good work!