body {
  background:#afdcff;
}


.cloudWhite {
  width: 350px; height: 120px;
  background: #f2f9fe;
  background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  z-index: 2;
}

.cloudWhite:after, .cloudWhite:before {
  content: '';
  position: absolute;
  background: #f2f9fe;
  z-index: 1;
}

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

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

#cloud {
  width: 350px; height: 120px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  position: relative;
  right:-1000px;
  margin-top:120px;
  box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
  z-index: -3;
}

#cloud:after, #cloud:before {
  content: '';
  position: absolute;
  background: #f2f9fe;
  z-index: -3;
    box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
}

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

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