Welcome to today’s tutorial. In today’s tutorial, we are going to create a glassmorphism UI profile card. This profile card comes with a 3D flip hover effect.Glassmorphism has been one of the trending UI designs. It is also called as frosted glass effect or simply glass UI.
The card that we create today has a minimal yet modern design focusing more on achieving the glass effect. So let’s begin with the tutorial.
Video Tutorial:
If you like to code along with me, I have a video version of this tutorial on my youtube channel. You can check the tutorial here down below. Also, if you like the tutorial, the sure to subscribe to my youtube channel. I post a new video tutorial every alternate day on my channel.
Project Folder Structure:
Let us take a quick look at the project structure. The project structure consists of 2 files. First is the HTML document – index.html. And the second is the stylesheet – style.css.
HTML:
We start with the HTML code. Do Copy the code provided below and paste it into your HTML file.
We are using font awesome icons in our project. We have linked the font awesome icons CDN in the head section of our HTML file.
Let us start by creating a container div which consists of a card div. Inside the card with two main divs. One is the front div, and the other is the back div.
Firstly, we look into the front div. The front div consists of an img tag with a profile image in addition to the user details.
Next, we add the font awesome icons to the back div. We wrap the Instagram icon inside an anchor tag with a class name icon. In a similar fashion, we wrap other icons in the anchor tag as well.
You can basically use any icon of your choice here. For instance, you can use a message icon or a friend request icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glassmorphism Flip Card</title>
<!-- Font Awesome CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="card">
<div class="front">
<img src="profile-image.jpg" />
<div class="details">
<h2>Rosa Richards</h2>
<span>Developer</span>
</div>
</div>
<div class="back">
<a href="#" class="icon">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="icon">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="icon">
<i class="fab fa-twitter"></i>
</a>
</div>
</div>
</div>
</body>
</html>
CSS:
We now style the card using CSS. We will be using a lot of similar colours in our project. Therefore, we define various variables in the root of the document.
As usual, we do a basic CSS reset to remove the unwanted margins and paddings. We set the body with a defined ‘bg color’. We need to centre the container hence we use the CSS transforms. Along with this, we also set a perspective on the container.
Since we need to make the glassmorphism UI even more effective, we create a small blob below it using the container before the pseudo-element.
We set the dimensions for the card. Similarly, we set the same dimensions for the front and back div. In order to make the card look partially transparent, we use a background color with rgba(255, 255, 255, 0.12) value. To add the glass effect we add a backdrop filter with value blur(8px).
Here it is important to set the backface-visibility to hidden. We use the flex layout so that all the elements are positioned in the centre of the card vertically.
We give a circular shape to the profile image by setting the border-radius to 50%.
In order to style the card a bit more, we add some font style in the details div. We even style the icons and position them with the grid layout.
Finally, we rotate the back div by 180deg so that it faces exactly the other side of the user and its contents are no more visible.
Now it is time to add the hover effect. We add the hover effect on the card. Upon hover, the back div rotates 0deg facing the user. At the same time, the front div rotates -180deg to face the other side.
Now with a transition of 1 second added to the front and back div, the flip effect looks perfect. That’s it our glassmorphism card with flip effect is now ready.
:root {
--theme-color-1: #0084ff;
--theme-color-2: #1c53df;
--bg-color: #000422;
--white-shade-1: #ffffff;
--white-shade-2: #d0d0d0;
--white-rgba: rgba(255, 255, 255, 0.12);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: var(--bg-color);
}
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 45%;
left: 50%;
perspective: 800px;
}
.container:before {
content: "";
position: absolute;
height: 280px;
width: 280px;
background: radial-gradient(var(--theme-color-1), var(--theme-color-2));
border-radius: 50%;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
}
.card {
height: 380px;
width: 350px;
position: relative;
}
.front,
.back {
position: absolute;
display: flex;
align-items: center;
height: 100%;
width: 100%;
border-radius: 15px;
background-color: var(--white-rgba);
border: 2px solid var(--white-rgba);
backdrop-filter: blur(8px);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: 1s;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.front {
flex-direction: column;
justify-content: center;
gap: 50px;
}
.front img {
height: 140px;
width: 140px;
border-radius: 50%;
border: 10px solid var(--white-rgba);
}
.details {
text-align: center;
}
h2 {
font-size: 22px;
font-weight: 500;
letter-spacing: 0.5px;
color: var(--white-shade-1);
}
span {
font-size: 14px;
color: var(--white-shade-2);
}
.back {
justify-content: space-around;
transform: rotateY(180deg);
}
.icon {
display: grid;
place-items: center;
height: 65px;
width: 65px;
background-color: var(--white-rgba);
font-size: 25px;
border-radius: 8px;
text-decoration: none;
color: var(--white-shade-1);
}
.icon:hover {
transform: translateY(-10px);
background-color: var(--white-shade-1);
color: var(--theme-color-1);
}
.card:hover .back {
transform: rotateY(0deg);
}
.card:hover .front {
transform: rotateY(-180deg);
}
If you have any difficulties creating this you can download the source code by clicking on the download code button below. I would love to hear your suggestions and feedback so be sure to drop them in the comments below.
