Hello there! 😃 In this post, we will guide you drop-by-drop ☔ on how to make a beautiful gray CSS water drop using only CSS. We will take you through the entire process, from the initial design to the final touches, and provide useful tips on how to adjust CSS properties to achieve the perfect shape and reflection effects. By the end, you will have created stunning water drops that will capture everyone’s attention.
So, let’s begin this adventure and dive in! 🤿
HTML Structure for water drop
First, we create an HTML element with a class name that reflects the intended purpose and makes it easily identifiable. In our example, we will use the class name .drop 💦✨.
<div class="drop"></div>CSS Structure for a water drop
We continue working on our CSS code. First, we have to create our drop, then we will add some shine as a way to look more natural, and finally, we will add two more drops with different sizes. Let the game begin! ⏳
Create the water drop
We begin by setting the background-color for our body, giving it a light shade of grayish blue (#c9c9db). As drops are transparent, picking the appropriate color as their background is essential.
Then we define the dimensions and borders of our drop, setting the width and height and adjusting the border-radius property to create a slightly rounded shape. (It’s important to note that nothing will be rendered on the screen at this stage as our drop does not have any color yet. 💬 )
Next, we work on creating the drop effect using only shadows, which can be quite challenging. To achieve this, we have to make sure that the drop’s background-color is set to transparent.
body {
background-color: #c9c9db; /* a light shade of grayish blue */
}
.drop {
width: 200px;
height: 200px;
border-radius: 60% 45% 50% 60%/60% 45% 60% 50%;
background-color: transparent;
}We finalize by adding the box-shadow property to create the CSS water drop effect. We have to play somehow 🎨 🖌 with our color shades till we manage 🤯 to create the perfect result. 💪
body {
background-color: #c9c9db; /* a light shade of grayish blue */
}
.drop {
...
box-shadow: 0 0 10px #8a8a8e, /* top-right-left-bottom */
5px 5px 10px 5px #929297, /* left & bottom */
inset 8px 8px 25px #71717a, /* inset top & right */
inset -8px -8px 25px #f2f2f2; /* inset left & bottom */
}Below, we can see what has been displayed on the screen up to this point.
Adding shine to the CSS water drop
With the power of CSS, we can bring to life unique and captivating shine ✨ effects using the :before and : after pseudo-elements. By setting different values for the same properties, we can create a distinctive and inspiring look that will leave a lasting impression on our audience.
To position the shine inside the drop element, we utilize the position: relative to our class and then the position: absolute to our pseudoelements.
.drop {
...
position: relative;
}
.drop:before {
position: absolute;
content: "";
width: 14%;
height: 10%;
background-color: #f5f5f5;
box-shadow: 0 0 10px #fff;
border-radius: 60% 45% 50% 60%/60% 45% 60% 50%;
top: 20%;
left: 25%;
transform: rotate(-40deg);
}
.drop:after {
position: absolute;
content: "";
width: 10%;
height: 6%;
background-color: #f5f5f5;
box-shadow: 0 0 10px #fff;
border-radius: 60% 45% 50% 60%/60% 45% 60% 50%;
top: 35%;
left: 15%;
transform: rotate(-50deg);
}Then, we specify the dimensions and colors for the shine by setting the width, height and background-color.
Next, we add the box-shadow and border-radius properties that allow us to create smooth and rounded corners on the shiny elements. This can give the design a softer look.
After that, we use the top and left properties to position them.
Finally, to make them look even more realistic, we can add some rotation by using the transform: rotate() property.
In the following image, you can see the changes applied: a shiny, grey water drop!
You may also like 🎬
Create the rest of the water drops
We will complete our work by adding two more drops. Each drop will have a different class, depending on its size.
<div class="drop"></div>
<div class="drop drop--medium"></div>
<div class="drop drop--small"></div>First of all, we add a small margin of 30 pixels between the drops. Then, we continue with adding the drop’s size based on our preferences.
.drop {
...
margin: 30px;
}
.drop--medium {
width: 120px;
height: 120px;
}
.drop--small {
width: 50px;
height: 50px;
}Here we are! Our stunning water drops are displayed on the screen! Nice, isn’t it? 😎
(We added some extra styling, not included in our code snippets, to center our drops, in case you are wondering about the last screenshot)
Hope you found it useful. Utilize these techniques to create stunning water drops that will impress your audience. Have fun experimenting with different colors, shades, and shapes to produce your own unique designs! 💦 ✨ Happy coding!
Complete code solution
Below is the full code referenced in this blog post, along with some extra stylings to enhance our final result. Feel free to copy and use it in your own projects. If you have any questions or encounter any issues, don’t hesitate to reach out for assistance in the comments section. You can easily copy the desired code snippet by clicking on the copy icon located in the top-right corner of each snippet.
<div class="drop"></div>
<div class="drop drop--medium"></div>
<div class="drop drop--small"></div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
}
body {
background: #c9c9db;
display: flex;
align-items: center;
justify-content: center;
}
.drop {
width: 200px;
height: 200px;
border-radius: 60% 45% 50% 60%/60% 45% 60% 50%;
background-color: transparent;
box-shadow: 0 0 10px #8a8a8e, /* top-right-left-bottom */
5px 5px 10px 5px #929297, /* left & bottom */
inset 8px 8px 25px #71717a, /* inset top & right */
inset -8px -8px 25px #f2f2f2; /* inset left & bottom */
position: relative;
margin: 30px;
}
.drop:before {
position: absolute;
content: "";
width: 14%;
height: 10%;
background-color: #f5f5f5;
box-shadow: 0 0 10px #fff;
border-radius: 60% 45% 50% 60%/60% 45% 60% 50%;
top: 20%;
left: 25%;
transform: rotate(-40deg);
}
.drop:after {
position: absolute;
content: "";
width: 10%;
height: 6%;
background-color: #f5f5f5;
box-shadow: 0 0 10px #fff;
border-radius: 60% 45% 50% 60%/60% 45% 60% 50%;
top: 35%;
left: 15%;
transform: rotate(-50deg);
}
.drop--medium {
width: 120px;
height: 120px;
}
.drop--small {
width: 50px;
height: 50px;
}🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼
