Glassmorphism is new growing and unique design trend which card based interface. It is primarily using the blurry effect to the background of any elements. Glassmorphism makes your design super attractive and looks like real glass. The reason of why called glassmorphism because its used is to establish a visual hierarchy and depth of the interface. Here i am using CSS to generate glassy effects to the card. backdrop-filter: blur()is main property which gives glassy looks to objects.
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.square{
left: 280px;
top: -30px;
height: 100px;
width: 100px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
position: relative;
transform: rotate(-25deg);
}
.circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(120deg, #c2009b, #6c0a75);
}
.circles {
position: absolute;
height: 270px;
width: 450px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.circle-1 {
height: 300px;
width: 300px;
top: -150px;
left: -80px;
opacity: 0.8;
animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
animation-iteration-count: infinite;
animation-name: float;
-webkit-animation-name: float;
animation-duration: 6s;
-webkit-animation-duration: 6s;
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
animation-direction: alternate;
}
.circle-2 {
height: 240px;
width: 240px;
top: 80px;
right: -100px;
opacity: 0.8;
animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
animation-iteration-count: infinite;
animation-name: float;
-webkit-animation-name: float;
animation-duration: 6s;
-webkit-animation-duration: 6s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
animation-direction: alternate;
}
/* Background circles end */
.card {
height: auto;
max-width: 500px;
padding: 2.5rem 2rem;
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(35px);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
padding: 30px 30px 30px 30px;
overflow: hidden;
}
body {
font-family: 'Poppins', sans-serif;
align-items: center;
justify-content: center;
min-height: 100vh;
display: block;
position: center;
background-color: rgb(240, 244, 247);
background: linear-gradient(-70deg, #202020, #000000);
color: rgba(255, 255, 255, 0.8);
}
/* Utilities */
.card::after, .card img {
border-radius: 50%;
}
body, .card, .stats {
display: flex;
}
.card img {
width: 100px;
height: 100px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.infos {
margin-left: 1.5rem;
}
.name {
margin-bottom: 1rem;
}
.name h2 {
font-size: 1.3rem;
color: #fff;
}
.name h4 {
font-size: .8rem;
font-weight: lighter;
}
.text {
font-size: .9rem;
margin-bottom: 1rem;
font-weight: lighter;
}
a{
color: rgba(255, 255, 255, 0.8);
}
.links a{
text-decoration: none;
font-weight: lighter;
}
.links i{
margin-right: 10px;
font-size: 18px;
}
.links a:hover{
color: #fff;
}
ul {
list-style: none;
margin-top: 1rem;
}
.stats {
margin-bottom: 1rem;
}
.stats li {
min-width: 2rem;
}
.stats li h3 {
font-size: .99rem;
}
.stats li h4 {
font-size: .75rem;
}
.stats a:hover {
color: #fff;
font-size: 22px;
}
@media screen and (max-width: 450px) {
.card {
display: block;
}
.infos {
margin-left: 0;
margin-top: 1.5rem;
}
}HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Glassmorphism</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="box">
<div class="mdl">
<div class="circles">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="triangle"></div>
</div>
<div class="card">
<div class="img">
<img src="" alt="profile img"> <!-- set profile image here -->
</div>
<div class="infos">
<div class="name">
<h2>Maniisha Gorasiya</h2>
<h4>youremailId@gmail.com</h4>
</div>
<p class="text"> UI/UX Designer | Front-End Developer | Graphics Designer </p>
<div class="links">
<a href="https://www.lpktechnosoft.com">
<i class="fa fa-globe" aria-hidden="true"></i>lpktechnosoft.com </a>
</div>
<ul class="stats">
<li>
<h2>
<a href="https://www.facebook.com/lpktechnosoft" target="_blank">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</a>
</h2>
</li>
<li>
<h2>
<a href="https://www.linkedin.com/company/14463039/admin/" target="_blank">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
</a>
</h2>
</li>
<li>
<h2>
<a href="https://www.instagram.com/lpktechnosoft/" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</h2>
</li>
</ul>
</div>
</div>
<div class="square"></div>
</div>
</div>
</body>
</html>
and your glassy looked card is ready :). Hope this post is helpful for you... Thank you for visiting, Have good day...
fHLvlxbf
1
