Clouds and Rain

dabblet.css

/**
 * Clouds and Rain */
 .wrapper{
 	height:800px;
 	padding:50px;
 }
body{
background-image: linear-gradient(bottom, rgb(242,243,250) 0%, rgb(186,199,209) 100%);
background-image: -o-linear-gradient(bottom, rgb(242,243,250) 0%, rgb(186,199,209) 100%);
background-image: -moz-linear-gradient(bottom, rgb(242,243,250) 0%, rgb(186,199,209) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(242,243,250) 0%, rgb(186,199,209) 100%);
background-image: -ms-linear-gradient(bottom, rgb(242,243,250) 0%, rgb(186,199,209) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(242,243,250)),
	color-stop(1, rgb(186,199,209))
);
}
.cloud{
	width:120px;
	height:40px;
	background:#fff;
	display:block;
	border-radius:30px;
	position:relative;
	margin:0px auto;
	box-shadow:inset 0 -2px rgba(255,255,255,.6), 0px 2px 5px rgba(100,100,100,0.5), inset 0px -2px 2px rgba(198, 208, 228, 0.5) ;
}
.cloud::after, .cloud:before{
	content:'';
	position:absolute;
	display:block;
	border-radius:100%;
	background-image:-webkit-linear-gradient(rgba(255,255,255,1) 80%, rgba(255,255,255,0));
	-webkit-mask-image: -webkit-linear-gradient(#000 40%, rgba(255,255,255,0));
	left:10px;
	top:-15px;
}

.cloud::after{
	width:35px;
	height:35px;
	left:14px;
	top:-13px;
}

.cloud::before{
	width:70px;
	height:70px;
	left:35px;
	top:-25px;
}

.drop{
	width:20px;
	height:20px;
	display:block;
	background:#fff;
	margin:0px auto;
	border-radius:0% 100% 100% 100%;
	position:relative;
	top:20px;
	-webkit-transform:rotate(45deg);
	box-shadow:inset 0 -2px rgba(255,255,255,.6), 2px 1px 5px rgba(100,100,100,0.5), inset 0px -2px 10px rgba(178, 205, 226, 0.9) ;
	-webkit-animation:dropfall 3s infinite ease-in-out;
}
@-webkit-keyframes dropfall{
	0%{top:20px;}
	100%{top:300px;opacity:0;}
}

dabblet.html

<div class="wrapper">
	<i class="cloud"></i>
	<span class="drop"></span>
</span>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}