Hello Coders, In this article we are going to learn how to create water drops or you can also call it Dropmorphism using HTML and CSS.
You might have seen water drops in real world but there is no code written for it right? lol. So today we are going to create water drops using html and css. People also call it Dropmorphism. Both of these water drops you are seeing above will be created using pure css.
How to create dropmorphism or water drops with html and css?
I have given a step by step video tutorial as well all the source code required to help you create this dropmorphism effect using html and css.
Dropmorphism or Water drops using HTML and CSS | Video Tutorial
In the video above, I have shown how to build this step by step. If you are beginner and its hard for you to understand what I am saying. Please Consider watching the video tutorial.
Dropmorphism or Water drops with HTML and CSS | Source Code
Here I have provided both html and css code. You can also download the complete source code by clicking on the download button at the bottom of this article.
How do I create Water drops in HTML? HTML Source Code
Create an index.html file and Copy the below code which contains boiler plate of an html document like html, head, title, body tags. And also all the html code required for this project.
HTML Code : Create a div tag with class ‘c’ and add two divs with class ‘drop’. Give ‘drop1’ as class name for first one and ‘drop2’ as class name for second one. Also add some text as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dropmorphism</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<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>
</body>
</html>
How do I create Water drops in CSS? CSS Source Code
To create water drops, create css file styles.css and link it out html document inside the head section. Start typing the below css code and as you type observe the changes it makes.
CSS Code : We will be using a custom font from the google font i.e Montserrat. I have also provided the import code for that font in the below css code.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&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;
}
.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%;
}
h1 {
font-size: 72px;
color: white;
line-height: 0;
}
p {
line-height: 0;
color: white;
font-size: 20px;
}
This is what you will get. Really cool looking 2 Water drops.
Thank you for reading this article.
Credits: Pratham
Download Source Code of Dropmorphism | Click on the below download button to directly download the source codes.
