<i class="cloud"></i>​

html {
    background-image: -webkit-linear-gradient(hsla(240,75%,75%,.6), hsla(300,75%,75%,.2));
    font-size: 100%;
    min-height: 100%;
}
.cloud {
    background-color: #fff;
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
    border-radius: 1em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.5);
    display: inline-block;
    height: 1em;
    left: 50%;
    margin-left: -1.5em;
    position: absolute;
    top: 50%;
    width: 3em;
    -webkit-filter: drop-shadow(0 2px 3px hsla(0,0%,0%,.25));
}
.cloud:after,
.cloud:before {
    background-color: #fff;
    content: '';
    border-radius: 100%;
    position: absolute;
}
.cloud:after {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025));
    height: 1em;
    right: .4em;
    top: -.5em;
    width: 1em;
}
.cloud:before {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075));
    height: 1.6em;
    left: .4em;
    top: -.75em;
    width: 1.6em;
}​