Pure CSS Cloud with shadow

by Premchand R

HTML

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

CSS

.cloud, .cloudshadow {
	width: 350px; height: 120px;
	background: #3498db;
	border-radius: 100px;
	position: relative;
	margin: 150px 50px;
}
.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;
}