If you want to create Glassmorphism Profile Card then this article will help you. Here I have shown how to create Glassmorphism Profile Card using HTML and CSS.
If you watch my other tutorials you will understand that I have already created login form, calculator, analog etc. using Glass Morphism design. Now is the time to create a profile card of Glassmorphism design.
Watch its live demo to learn how it works. Here I have tried to share the necessary source code and tutorial. Hope this helps you. It's a simple profile card with a profile image, some text, a few social icons and two buttons at the end. You can add more information here if you want.
Glassmorphism Profile Card HTML CSS
However, it is a simple profile card but interesting enough. Two colorful circles have been used in the background which has enhanced the beauty many times over. I used very simple HTML and CSS code. Even if you are a beginner, you can easily understand.
Here the background of Glassmorphism Profile Card is transparent but somewhat vague. A backdrop-filter has been used to create this blur. Here the elements in the background can be seen in some vague way.
Related Post:
- Simple Weather App using JavaScript
- Make a Todo List using JavaScript
- Simple Stopwatch using JavaScript
- Skeleton Screen Loading Animation
- Javascript Age Calculator
- Random Password Generator with JavaScript
- Automatic Image Slider in Html, CSS
- Sidebar Menu Using HTML CSS
Let's know how it can be made. For this I have used HTML and CSS. First I put the HTML codes together. Then I gave the CSS codes step by step. In this case of CSS code, I have given the possible result picture after each step so that it is easy for you to understand.
1. HTML code to create profile card
The following HTML codes have been used to create this Glassmorphism Profile Card. First I created a profile image, some text, then a social icon, and finally two buttons.
<!-- For the element of the background -->
<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>
<!-- Basic structure of profile card -->
<div class="wrapper">
<!-- Profile image area -->
<div class="img-area">
<div class="inner-area">
<img src="https://1.bp.blogspot.com/-NYPWByswrmg/YSKXi-CZiGI/AAAAAAAACZY/LtLeocLNtrkdb31nrCn6V0mkDRW-jhOUwCNcBGAsYHQ/s16000/img4.jpg" alt="">
</div>
</div>
<!-- Basic information -->
<div class="name">Monalisha Roy</div>
<div class="about">
I am a Profasonal Web Designer
</div>
<!-- social icon -->
<div class="social-icons">
<a href="#" class="gl"><i class="fab fa-youtube"></i></a>
<a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
<a href="#" class="insta"><i class="fab fa-google"></i></a>
<a href="#" class="yt"><i class="fab fa fa-whatsapp"></i></a>
</div>
<!-- 2 buttons -->
<div class="buttons">
<button>Message</button>
<button>Subscribe</button>
</div>
</div>
2. Design Glassmorphism Profile Card
Now is the time to design the profile card completely with the help of CSS. The first webpage was designed and used in black.
*{
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-color: #080710;
}
3. Design background circles:
Now I have created two circles in that page. I have already added the required HTML code for this. The height: 200px, width: 200px and background of those circles have been used here.
.background{
width: 430px;
height: 520px;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%,-50%);
}
.background .shape{
position: absolute;
border-radius: 50%;
height: 200px;
width: 200px;
}
.shape:first-child{
background: linear-gradient(
#1845ad,
#23a2f6
);
left: -80px;
top: -80px;
}
.shape:last-child{
background: linear-gradient(
to right,
#ff512f,
#f09819
);
right: -30px;
bottom: -80px;
}
4.Basic structure of profile card:
Now the basic structure of Glassmorphism Profile Card has been created. The width of this basic structure: 350px. Its background is transparent but a backdrop filter has been used to make the background blurry.
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
background-color: rgba(255,255,255,0.13);
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
}
.wrapper{
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 350px;
padding: 30px;
border-radius: 10px;
}
5. Basic structure of profile card:
Now the profile image has been designed. Border-radius: 50% is used to make the profile image width, height 150px and background round.
With this a thick border has been used here. I have already added the code required to extend this border above. So there was no need to add borders and shadows separately.
.wrapper .img-area{
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 150px;
border-radius: 50%;
}
.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;
}
6. Design Basic Information:
The following codes have been used to design some basic information.
.wrapper .name{
color: white;
margin: 10px 0 5px 0;
font-size: 23px;
font-weight: 500;
}
.wrapper .about{
color: #d0d1d7;
font-weight: 400;
font-size: 16px;
}
7. Design social icons:
Now is the time to design the social icons. I have already added the social icons with the help of HTML. Now they have been designed. Border-radius: 50% is used to make the icons background width, height 40px and round in the background.
.wrapper .social-icons{
margin: 15px 0 25px 0;
}
.social-icons a{
position: relative;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
height: 40px;
width: 40px;
margin: 0 5px;
}
.social-icons a:hover::before,
.wrapper .icon:hover::before,
.buttons button:hover:before{
content: "";
position: absolute;
border-radius: 50%;
background: #ecf0f3;
top: 0;
left: 0;
bottom: 0;
right: 0;
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
}
Now I have designed the icons and given different colors for each one. I have used font-size: 20px to increase the size.
.social-icons a i{
width: 100%;
height: 100%;
font-size: 20px;
line-height: 35px;
position: relative;
z-index: 3;
text-align: center;
}
.social-icons a:nth-last-child(1) i{
color: #13d151;
}
.social-icons a:nth-last-child(2) i{
color: #e6ba12;
}
.social-icons a:nth-last-child(3) i{
color: #1da9e9;
}
.social-icons a:nth-last-child(4) i{
color: #f23400;
}
8. Design the buttons:
As you can see above all the work of this Glassmorphism Profile Card is done. Now only the buttons have to be designed. Above we have created two buttons with the help of HTML.
.wrapper .buttons{
display: flex;
width: 100%;
justify-content: space-between;
}
.buttons button{
outline: none;
padding: 12px 0;
color: #d0d1d6;
font-size: 17px;
position: relative;
width: 100%;
border: none;
font-weight: 400;
border-radius: 5px;
cursor: pointer;
z-index: 4;
}
The following codes are used to determine the position of the buttons and to add hover effects to them.
.buttons button:first-child{
margin-right: 10px;
}
.buttons button:last-child{
margin-left: 10px;
}
.buttons button:hover:before{
z-index: -1;
border-radius: 5px;
}
.buttons button:hover{
color: black;
}
Hopefully from the above tutorial you have learned how to create this Glassmorphism Profile Card with the help of HTML and CSS.
If there is any problem then you can definitely let me know by commenting. Be sure to let us know how you like this design. If necessary, you can take the help of this link to download the source code.
You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/
Top comments (0)