How to design water drop using HTML and CSS
CSS Mastery: Advanced Web Standards Solutions
Provides information on developing Web sites using CSS3, covering such topics as the visual formatting, model, styling links, layout, and bugs and bug fixing.
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.
CSS Mastery: Advanced Web Standards Solutions
Provides information on developing Web sites using CSS3, covering such topics as the visual formatting, model, styling links, layout, and bugs and bug fixing.
๐ You Might Also Like
- โ Best Google AdSense Alternative 2026 - Monetag Review for Publishers miscellaneous
- โ Top Java Interview Questions for 6+ Years Experience (2026) java
- โ HTTP QUERY Method (RFC 10008) โ The New HTTP Method Every Developer Should Know miscellaneous
- โ How to Start Freelancing as a Web Developer in 2026 (Complete Beginner's Guide) miscellaneous
- โ MyLync - Best Free Linktree Alternative for Developers, Creators & Businesses miscellaneous