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>

There is all html code for theDropmorphism UI Design. Now, you can see output without Css, then we write Css Code For for Dropmorphism UI Design.

50+ HTML, CSS & JavaScript Projects With Source Code

Html Code Output

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

 

CSS Code For Dropmorphism UI Design

@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

 

 

 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Hope you like the css Dropmorphism UI Design, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you

In this post, we learn how to create HTML CSS Dropmorphism UI Design Code. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki