In this tutorial, you will learn how to create a cloud using CSS and add a raindrop animation. Watch the video below for a detailed tutorial.
<div class="cloud"></div>
body {
background-color: #2e3537;
display: flex;
align-items: center;
height: 100vh;
}
.cloud {
position: relative;
width: 300px;
height: 160px;
margin: 0 auto;
background-image:
radial-gradient(circle 30px at 30px 30px, white 100%, transparent 0),
radial-gradient(circle 60px at 60px 60px, white 100%, transparent 0),
radial-gradient(circle 35px at 35px 35px, white 100%, transparent 0),
radial-gradient(circle 45px at 45px 45px, white 100%, transparent 0),
linear-gradient(white 50px, transparent 0)
;
background-repeat: no-repeat;
background-position: 0px 50px, 40px 0px, 130px 30px, 170px 50px, 50px 70px;
background-size: 60px 50px, 120px 80px, 70px 50px, 90px 50px, 160px 30px;
}
.cloud::after {
position: absolute;
content: '';
color: white;
top: 90px;
width: 1px;
height: 10px;
animation: raindrop 0.8s linear infinite;
}
@keyframes raindrop {
0% {
box-shadow: 35px 0 white, 70px 0 white, 105px 0 white, 140px 0 white, 175px 0 white, 210px 0 white, 235px 0 white;
}
50% {
box-shadow: 35px 20px white, 70px 60px transparent, 105px 30px transparent, 140px 70px transparent, 175px 40px white, 210px 60px transparent, 235px 80px transparent;
}
100% {
box-shadow: 35px 60px transparent, 70px 60px transparent, 105px 50px transparent, 140px 70px transparent, 175px 70px transparent, 210px 60px transparent, 235px 20px transparent;
}
}