<div class="wrap">
<h1>Glassmorphism</h1>
<div class="drop drop1">
<div class="drop drop2"></div>
<div class="drop drop3"></div>
<div class="drop drop4"></div>
</div>
</div>
<span><a href="https://www.albertwalicki.com/glassmorphism-how-to-create?utm_source=codepen&utm_medium=link&utm_campaign=codepen_glas">Mine article about glassmorphism</a></span>
html,body {
width: 100%;
min-height: 100%;
overflow:hidden;
min-height: 99vh;
}
body {
background: linear-gradient(90deg,#FFFF00 6%,#FFA500 25%,#F14444 45%,#D53567 55%,#9A109A 94%);
display: flex;
align-items: center;
justify-content: center;
}
.wrap {
position: relative;
}
h1 {
font-family: Arial;
color: #FFF;
font-size: 90px;
padding: 20px 30px;
text-shadow: 2px 2px rgba(0,0,0,0.3);
text-transform: uppercase;
}
.main {
background: rgba(255,255,255,0.4);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.2);
width: 40px;
height: 40px;
position: absolute;
border-radius: 50%;
top: 11px;
left: 280px;
right: 0;
display: block;
margin: 0 auto;
z-index: 4;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.drop {
background: rgba(255,255,255,0.4);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.2);
position: absolute;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: block;
margin: 0 auto;
}
.drop1 {
width: 47%;
height: 150px;
top: 56px;
left: 0;
right: 0;
z-index: 2;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.drop2 {
width: 40px;
height: 40px;
top: -30px;
left: -80%;
right: 0;
z-index: 4;
}
.drop3 {
width: 60px;
height: 60px;
top: 120px;
right: 30px;
z-index: 3;
}
.drop4 {
width: 40px;
height: 40px;
border-radius: 50%;
top: -55px;
right: 20px;
}
span {
background:#fff;
position:absolute;
bottom:0;
right:0;
}
span a {
padding: 8px 12px;
font-family: Arial;
color: #000;
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.