Pure CSS Cloud with shadow

by Premchand R

HTML

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

CSS

.cloud, .cloudshadow {
  transform:scale(0.5);
	width: 350px;
  height: 120px;
	background: #3498db;
	border-radius: 100px;
	position: relative;
}
.cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before {
	content: '';
	position: absolute;
	background: #3498db;
	z-index: 1
}
.cloudshadow, .cloudshadow:after, .cloudshadow:before {
    margin: 0;
    z-index: -99;
}
.cloud:after, .cloudshadow:after {
	width: 100px;
  height: 100px;
	top: -50px;
  left: 50px;
	border-radius: 100px;
}
.cloud:before, .cloudshadow:before  {
	width: 180px; 
  height: 180px;
	top: -90px;
  right: 50px;
	border-radius: 200px;
}