Dropmorphism UI Design | Dropmorphism css code - codewithrandom

Dropmorphism UI Design |  Dropmorphism css code - codewithrandom 

Dropmorphism UI Design |  Dropmorphism css code - codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how 
to create css Dropmorphism UI Design. We use HTML & CSS  for this simple css Dropmorphism UI Design. Hope you enjoy our blog so let's start with a basic HTML structure for a css Dropmorphism UI Design.

HTML code for Dropmorphism

 <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 the CSS Dropmorphism UI Design. Now, you can see output without CSS, then we write CSS for Dropmorphism UI Design.
Output
Dropmorphism UI Design |  Dropmorphism css code - codewithrandom

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 section,  Here is our final updated output CSS.

Output

Dropmorphism UI Design |  Dropmorphism css code - codewithrandom

Dropmorphism UI Design |  Dropmorphism css code - codewithrandom

Dropmorphism UI Design |  Dropmorphism css code - codewithrandom

Now we have completed our CSS section,  Here is our updated output with  CSSHope you like the css Dropmorphism UI Design, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
Check more

In this post, we learn how to create a Dropmorphism UI Design using simple HTML & CSS. 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 


1 Comments

Post a Comment

Previous Post Next Post