Dropmorphism UI Design using HTML and CSS

If you’re looking to improve your web design skills, creating a Dropmorphism UI design using HTML and CSS is a great way to start. In this tutorial, we’ll show you how to create a beautiful and visually appealing UI design using the latest design trend called “Dropmorphism.” You’ll learn how to use HTML to create the structure of the UI design and style it with CSS to give it a unique and modern appearance. We’ll also cover how to add hover effects to make your UI design more interactive and engaging. By the end of this tutorial, you’ll have a fully-functional and visually stunning Dropmorphism UI design that you can use to showcase your web design skills and impress your website visitors. So, let’s get started on creating a beautiful and modern Dropmorphism UI design using HTML and CSS!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

50 HTML CSS and JavaScript Projects you should create

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

Dropmorphism UI Design using HTML and CSS

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Dropmorphism UI Design using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your `<body>` tag.

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

CSS Code

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&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;
  font-family: "Poppins", sans-serif;
}

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";
}

Final Output

Written by: Piyush Patil

Code Credits: @prathkum

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖