ADVERTISEMENT

HTML CSS Dropmorphism UI Design Code

Telegram Group Join Now

ADVERTISEMENT

HTML CSS Dropmorphism UI Design Code

HTML CSS Dropmorphism UI Design Code
HTML CSS Dropmorphism UI Design Code

 

ADVERTISEMENT

 

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

Html Code Output

HTML CSS Dropmorphism UI Design Code

 

ADVERTISEMENT

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

ADVERTISEMENT

HTML CSS Dropmorphism UI Design Code

 

ADVERTISEMENT

HTML CSS Dropmorphism UI Design Code

 

HTML CSS Dropmorphism UI Design Code

 

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

ADVERTISEMENT

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.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “HTML CSS Dropmorphism UI Design Code”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT