HTML CSS Dropmorphism UI Design Code

Welcome to the Codewithrandom blog. In this blog, We learn how to create HTML CSS Dropmorphism UI Design. We use HTML and CSS  for this Dropmorphism UI Design Code.

I hope you enjoy our blog so let’s start with a basic html structure for a Dropmorphism UI Design.

HTML Code For Dropmorphism UI Design

<div class="c">
<div class="drop drop1"></div>
<div class="drop drop2"></div>
<div class="text-c">
<h1>DROPMORPHISM</h1>
<p>Both the drops are created using CSS</p>
</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
background: #318CFE;
font-family: 'Montserrat', sans-serif;
}
.c {
position: relative;
}
.text-c {
display: grid;
place-items: center;
position: relative;
}
h1 {
position: relative;
font-size: 72px;
color: white;
line-height: 0;
}
.drop {
position: absolute;
height: 200px;
width: 200px;
background: #54ABFB;
border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
opacity: 0.8;
border: 2px solid #3d93ff;
}
.drop::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: #318CFE;
border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
box-shadow: -20px 30px 16px #1B6CFB, -40px 60px 32px #1b6cfb, inset -6px 6px 10px #1B6CFB, inset 2px 6px 10px #1a74e5, inset 20px -20px 22px white, inset 40px -40px 44px #a8ceff;
}
.drop::after {
content: "";
position: absolute;
height: 40px;
width: 40px;
background: #E6FDFB;
border-radius: 44% 56% 46% 54% / 36% 50% 50% 64%;
left: 130px;
top: 40px;
box-shadow: 16px 40px 0 -10px white;
opacity: 0.8;
}
.drop1 {
left: -100px;
top: -50px;
}
.drop2 {
right: -100px;
bottom: -50px;
z-index: -1;
border-radius: 46% 50% 39% 54% / 56% 57% 50% 50%;
}
.drop2::before {
border-radius: 46% 50% 39% 54% / 56% 57% 50% 50%;
}
p {
line-height: 0;
color: white;
font-size: 20px;
font-family: "Montserrat"
}

Now we have completed our Css Code for Dropmorphism UI Design.  Here is our final updated output HTML + CSS.

Restaurant Website Using HTML And CSS With Source Code

Final Output