Glassmorphism User Profile Card Design

Glassmorphism is a design style used to give different web elements a unique look. It looks like a frosted glass Effect. A designer named Michal Malewicz invented this design style. This design style is used in many web and app development these days. In this blog, we will create a profile card UI design using this style. I suggest you watch the video below to learn more about the code we used. We have many videos on front-end web development on our YouTube channel. If you are interested, you can subscribe to our channel.

We hope you watched the video. We tried to create a user profile card with a glassmorphism design style. A user's profile card has information about them. The information is his name, designation, brief description, and social media profile link. The same elements are there in our user profile card design. The user profile card could be given a normal look. But instead of doing that, it has been given a glassmorphism or frosted glass effect. The glassmorphism design style has given the profile card an aesthetic look. Note that if want to watch the actual effect of glassmorphism or frosted glass effect, you need to open the snippet in the Google Chrome browser.

You May Also Like:

Glassmorphism User Profile Card Design [ Source Code ]:

The first thing you have to do is create two files. One is HTML and the other is CSS. You have to connect the external file to the HTML File. Next, copy the code from the below boxes and paste it into the related files. You can save the code and open it in the Google Chrome browser. You can download the file from the button below if you have problems with the code.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<title>How to Create User Profile Card using HTML & CSS | Glassmorphism Effect</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="round-1"></div>
	<div class="round-2"></div>
	<div class="wrapper">
		<div class="box">
			<div class="profile-img"><img alt="" src="2.jpg"></div>
			<h2>Jack Nikolson <span>Jackson Heights, USA</span></h2>
			<p>Front-End Developer &<br>
			Graphics Designer</p>
			<p class="btn-area"><a href="#">Message</a> <a class="ex" href="#">Following</a></p>
			<div class="socials">
				<div class="a1">
					<i class="fa fa-facebook"></i>
				</div>
				<div class="a2">
					<i class="fa fa-twitter"></i>
				</div>
				<div class="a3">
					<i class="fa fa-pinterest"></i>
				</div>
				<div class="a4">
					<i class="fa fa-google-plus"></i>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	font-family: 'Poppins', sans-serif;
}
body {
	background: #000;
}
.wrapper {
	width: 1152px;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0 auto;
	position: relative;
}
.round-1 {
	position: absolute;
	top: 5%;
	left: 32%;
	width: 13em;
	height: 13em;
	border-radius: 50%;
	box-shadow: 0 0 50px #D84869;
	background: linear-gradient(-25deg, #D84869, #F46641);
}
.round-2 {
	position: absolute;
	top: 50%;
	right: 23%;
	width: 19em;
	height: 19em;
	border-radius: 50%;
	box-shadow: 0 0 50px #5622FF;
	background: linear-gradient(180deg, #5622FF, #4190FD);
}
.box {
	width: 350px;
	height: 450px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #ffffff1a;
	backdrop-filter: blur(20px);
	padding: 1.5em;
	border-radius: 25px;
	border: 2px solid #ffffff30;
	box-shadow: 0 0 30px #0000002a;
	text-align: center;
}
.box h2 {
	color: #ffffff60;
	text-transform: capitalize;
	margin: 15px 0;
}
.box h2 span {
	display: block;
	font-size: 15px;
	font-weight: 300;
	text-transform: capitalize;
}
.box p {
	color: #ffffff90;
	font-size: 14px;
}
.btn-area a {
	text-decoration: none;
	color: #262626;
	background: rgba(255, 255, 255, 0.6);
	display: inline-block;
	padding: 8px 15px;
	margin: 15px 5px;
	border: 2px solid rgba(255, 255, 255, 0.6);
}
.btn-area a.ex {
	background: transparent;
	color: #fff;
}
.socials {
	margin-top: 20px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.socials div {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 45px;
	color: #fff;
	margin: 0 5px;
}
.socials div.a1 {
	background: #3b5998;
}
.socials div.a2 {
	background: #55acee;
}
.socials div.a3 {
	background: #bd081c;
}
.socials div.a4 {
	background: #dc4e41;
}
.socials i {
	font-size: 20px;
}
.profile-img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	object-fit: cover;
}
.profile-img img {
	width: 100%;
}

We hope you have implemented the code successfully. We Have lots of snippets with source codes on our website. The source code can be obtained by clicking on the load more button on the home page. If you share the articles with like-minded people, they will get benefited from them. We would like to thank you for visiting the website.

DOWNLOAD CODE

Glassmorphism User Profile Card Design [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Glassmorphism User Profile Card Design

Glassmorphism User Profile Card Design [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form