CSS: Sky background that will change your websites

Hello World! New episode of the series! - A CSS/JS trick in 5 minutes - Last 4 episodes were Javascript tricks so this time I want to show you a CSS one. I will try to do not exceed 20 lines of code like all other episodes of the series. So I will divide it into two bigs parts. In the first one, you will discover how to do a background with clouds, and in the second how to make a rain effect (maybe when the user hover something or enter a wrong info). Let's start!

---

Background:

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #22c5ff; // A blue that seems the sky
  display: flex;
  justify-content: center;
  flex-direction: column;
}

---

Clouds:

HTML:

<div id="background-wrap">
  <div class="x1">
    <div class="cloud"></div>
  </div>

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

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

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

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

We are just creating 6 divs, 5 are clouds and 1 is the container.

CSS:

First we style the container:

#background-wrap {
  bottom: 0;
  left: 0;
  padding-top: 50px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
}

Now we style all the clouds together:

.cloud {
  background: #fff;
  background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
  border-radius: 100px;
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  height: 120px;
  position: relative;
  width: 350px;
}

.cloud:after,
.cloud:before {
  background: #fff;
  content: "";
  position: absolute;
  z-index: -1;
}

.cloud:after {
  border-radius: 100px;
  height: 100px;
  left: 50px;
  top: -50px;
  width: 100px;
}

.cloud:before {
  border-radius: 200px;
  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
}

Then we style each cloud to look unique:

.x1 {
  animation: animateCloud 35s linear infinite; // The animation will be infinite, when a cloud disappear from one side it will reappear on the other
  transform: scale(0.65);
}

.x2 {
  animation: animateCloud 20s linear infinite;
  transform: scale(0.3);
}

.x3 {
  animation: animateCloud 30s linear infinite;
  transform: scale(0.5);
}

.x4 {
  animation: animateCloud 18s linear infinite;
  transform: scale(0.4);
}

.x5 {
  animation: animateCloud 25s linear infinite; 
  transform: scale(0.55);
}

So each cloud have a different size (scale) and velocity (seconds to finish the animation)

Now we add the animation "animateCloud":

@keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

We are just changing the margin so the cloud goes from left to right.

---

Make it rain:

We just need a div/section with .rain class. To make thing dynamically you can add the class in javascript as I explain in this article

.rain {
  width: 100%;
  height: 100vh;
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
  animation: rain 0.5s linear infinite;
  opacity: 0;
}

And the animation...

@keyframes rain {
  0% {
    background-position: 0 0;
    opacity: 1;
  }

  100% {
    background-position: 10% 60%;
    opacity: 1;
  }
}

---

You can have here a live preview:
Open Me for full screen best experience:

---

Hope this helped and thanks for reading!

Please smash that like button to make me understand that you want the series to continue :)

Check this article about how to write CSS like a pro!

---

Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!