1. Tutorials
  2. CSS
  3. Rain Cloud Animation

Rain Cloud Animation

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.

HTML

<div class="cloud"></div>

CSS

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;
  }
}