Glassmorphism Profile Card Design using HTML and CSS

Glassmorphism Profile Card Design using HTML and CSS

Glassmorphism Profile Card Design using HTML and CSS

In this article, you will learn how to create a Glassmorphism Profile Card design using HTML and CSS. Earlier I shared with you tutorials on many more types of web elements such as login forms, calculators, etc. using Glassmorphism design. 

Now is the time to create a profile card of Glassmorphism. I took the help of HTML and CSS to create this profile card. If you know basic HTML and CSS then you can easily make this Glassmorphism Profile Card. 

This type of design is much more attractive and beautiful than ordinary design. It has everything like a normal profile card but with a transparent background and a color element in the background.

Glass Morphism Profile Card Design

Below I have given a demo to know how this Glassmorphism Profile Card works. In its demo section, you will find the required source code and live demo. You can copy those codes and use them in your work. However, I have given the download button below the article, with the help of which you can download the codes. Live Demo 👇👇

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

Hopefully with the help of the demo section above you have learned how to create a Glass Profile Card design. As you can see above, I have created two colorful circles on top of a web page. Gradient colors have been used in those circles. 

Then I made a profile card. First of all, I used a profile image in this card, then the name and some descriptions were used, then four social-media-icons and two buttons at the end. This is a very simple and easy profile card.

How to Create Glassmorphism Profile Card 

Now is the time to learn the tutorial on creating profile cards. Here I have shared step-by-step tutorials for beginners. I have shown how this profile can be easily created. HTML has been used to create the basic information and structure of this card and CSS has been used to design it.

A profile image has been used and a font awesome CDN link has been used. If you only want the source code, you can use the download button at the bottom of the article.

Step 1: Design the webpage

Two circles have been created on the web page using the following HTML and CSS codes. Gradient color has been used in these sites. You can use colorful images instead of these elements.

<div class=”background”>
      <div class=”shape”></div>
      <div class=”shape”></div>
</div>

Web pages have been designed using the following codes and black color has been used on this page.

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

Now those round circles have been made. The width and height of those circles are 200px and border-radius: 50% has been used to convert it to round. Different gradient background colors have been used for each.

.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}
.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;
}
Design the webpage

Step 2: Basic structure of profile card

Now is the time to create the basic structure of this profile card. The background color of the card is transparent. The backdrop filter has been used to create some blur in the background. 

It also has a 2-pixel border to enhance its beauty. This profile card width: 350px and height will depend on the number of containers.

<div class=”wrapper”>
 
</div>
.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;
width: 350px;
padding: 30px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
Basic structure of profile card

Step 3: Add a profile image to the card

Now it’s time to add a profile image to this profile card. The following HTML and CSS codes have been used for this. The height of this profile image: 150px, width: 150px, and border-radius: 50% have been used to make the image round.

<div class=”img-area”>
  <div class=”inner-area”>
    <img src=”image.jpg” alt=””>
  </div>
</div>
.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;
}
Add a profile image to the card

Step 4: Add names and descriptions

Now some basic information has been added to this profile card using the following codes. First the name and then some text. Font-size: 23px has been used to increase the size of the name and font-size: 16px for the size of the description.

<div class=”name”>Monalisha Roy</div>
 <div class=”about”>
   I am a Profasonal Web Designer
 </div>
.wrapper .name{                        
font-size: 23px;
font-weight: 500;
color: white;
margin: 10px 0 5px 0;
}
.wrapper .about{
color: #d0d1d7;
font-weight: 400;
font-size: 16px;
}
Add names and descriptions

Step 5: Add social icons to Glassmorphism Profile Card

Now is the time to add four social media icons. Here I have added four icons. You can change the icon to your liking. Border-radius: 50% is used to make the icon’s background height and width 40px and to make the background round.

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

Now I have added color to those icons and different colors have been used for each of them. Font-size: 20px has been used to increase the size of each icon.

.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
font-size: 20px;
line-height: 35px;
}
.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;
}
Glassmorphism Profile Card

Step 6: Make two buttons

Now it’s time to create two buttons. The size of this button depends on the padding. Front size and color white have been used to increase the text size.

<div class=”buttons”>
 <button>Message</button>
 <button>Subscribe</button>
</div>
.wrapper .buttons{
display: flex;
width: 100%;
justify-content: space-between;
}
.buttons button{
position: relative;
width: 100%;
border: none;
outline: none;
padding: 12px 0;
color: #d0d1d6;
font-size: 17px;
font-weight: 400;
border-radius: 5px;
cursor: pointer;
z-index: 4;
}

Some of the buttons have been positioned using the following codes and added a hover effect.

.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;
}
Glassmorphism Profile Card Design

Hopefully from this simple tutorial above you have learned how to create this Glassmorphism Profile Card. I have already created a login form using the Glassmorphism design. 

If you want, you can download the required code using the download button below. Please comment on how you like this Glassmorphism Profile Card Design.