A Pen by Vihanga nivarthana on CodePen.
Created
April 22, 2021 19:43
-
-
Save VihangaN/c7561e58bacea532c422b7b3c34a31be to your computer and use it in GitHub Desktop.
Glassmorphism icon
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Glassmorphism icon</title> | |
</head> | |
<body> | |
<div id="plant"> | |
<div class="grass"></div> | |
<div id="base"></div> | |
</div> | |
<div id="text">GLASSMORPHISM <br /> | |
<div id="subtext"> | |
ICON | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400&display=swap"); | |
body { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
flex-direction: column; | |
height: 100vh; | |
width: 100%; | |
background: rgba(0, 0, 0, 0.02); | |
font-family: "Poppins", sans-serif; | |
overflow:hidden; | |
#plant { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
flex-direction: column; | |
height: auto; | |
.grass { | |
width: 90px; | |
height: 90px; | |
background: #00ea52; | |
content: ""; | |
border-radius: 0px 100px; | |
transform: rotate(20deg); | |
transform-origin: center center; | |
position: relative; | |
display: flex; | |
align-items: flex-end; | |
box-shadow: inset 4px 2px 20px rgba(42, 187, 155, 0.6); | |
left: -25px; | |
top: 25px; | |
&::after { | |
position: absolute; | |
width: 100px; | |
height: 120px; | |
background: #00ea52; | |
content: ""; | |
border-radius: 0px 100px; | |
transform: rotate(40deg); | |
transform-origin: bottom right; | |
right: 1px; | |
bottom: 0.5px; | |
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), | |
inset 4px 2px 20px rgba(42, 187, 155, 0.6); | |
} | |
} | |
#base { | |
width: 158px; | |
content: ""; | |
border-top: 140px solid rgba(42, 187, 155, 0.15); | |
border-left: 25px solid transparent; | |
border-right: 25px solid transparent; | |
border-radius: 5px; | |
transform: scale(1.05); | |
backdrop-filter: blur(15.5px); | |
-webkit-backdrop-filter: blur(11.5px); | |
} | |
} | |
#text { | |
margin-top: 50px; | |
letter-spacing: 10px; | |
text-align: center; | |
font-weight: 100; | |
} | |
#subtext { | |
margin-top: 5px; | |
font-weight: 400 !important; | |
opacity: 0.5; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment