How to design water drop using HTML and CSS
๐๏ธ
34 Views
|
๐
Jul 23, 2021
|
โฑ๏ธ
5 min read
Use this awesome tricks to design water drops using HTML and CSS. Few lines of HTML code will help you to design water drops. It will looks similar as water drops. You can use this design in your website to make it more atractive.
First of all, create a HTML page, index.html and add following code in it:
<html> <head> <title>Water drops</title> </head> <body> <div class="drops"> <div class="drop"></div> <div class="drop"></div> <div class="drop"></div> <div class="drop"></div> </div> </body> </html>
Now, create a css page, style.css and add following in it:
body{
background: #ededed;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.drops{
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.drop{
position: absolute;
width: 150px;
height: 150px;
background-color:transparent;
/* here we will design water drops using border radius open google and search css flex border radius generator */
border-radius: 45% 55% 37% 63% / 34% 48% 52% 66% ;
box-shadow: inset 10px 10px 10px rgba(0,0,0,0.05),
15px 20px 10px rgba(0,0,0,0.10),
15px 20px 20px rgba(0,0,0,0.05),
inset -10px -10px 15px rgba(255,255,255,0.9);
}
.drop::before{
content:'';
position:absolute;
top:25px;
left:75px;
background: rgba(255,255,255,0.7);
width: 20px;
height: 20px;
border-radius: 45% 55% 37% 63% / 34% 48% 52% 66%;
}
.drop::after{
content:'';
position:absolute;
top:25px;
left:25px;
background: rgba(255,255,255,0.7);
width: 10px;
height: 10px;
border-radius: 45% 55% 37% 63% / 34% 48% 52% 66%;
}
.drop:nth-child(3){
transform: scale(0.5) translate(-200px, 180px);
}
.drop:nth-child(4){
transform: scale(0.5) translate(-200px, 180px);
}
You can also visit our youtube channel and watch this video to design water drop.
๐ You Might Also Like
- โ Best Google AdSense Alternative 2026 - Monetag Review for Publishers miscellaneous
- โ How to Start Freelancing as a Web Developer in 2026 (Complete Beginner's Guide) miscellaneous
- โ HTTP QUERY Method (RFC 10008) โ The New HTTP Method Every Developer Should Know miscellaneous
- โ JavaScript Array Methods Cheat Sheet โ Complete Guide with Example javascript
- โ MyLync โ Best Free Linktree Alternative for Developers, Creators & Businesses miscellaneous