CSS3 Animated Clouds - The Simple Way

Many wonder how hard it is to make clouds in pure CSS. Actually, it's quite easy!

I am going to show you how you can make a stylish CSS cloud (and animate it a bit) in a few steps and least number of lines in your CSS code.

Basically the first step is the make the base of the cloud (check out Step 1 in the demo). So, all you need to do is style a basic div:

.cloud_base {
    background: white;
    
    height: 100px;
    width: 300px;
    
    border-radius: 50px; /* half of height will do */
    
    position: relative;
    top: 120px;
    
    box-shadow:
        inset 5px -9px 5px rgba(225, 245, 253, 0.5),
        0px 0px 10px 6px rgba(240, 240, 240, 0.7);
    
    /* for basic little animation */
    -webkit-transition: 0.2s ease-in all;
    -moz-transition: 0.2s ease-in all;
    transition: 0.2s ease-in all;
}

Next you just make the rounded parts of the cloud. You could probably use a div but I used a span. The black-ish shadow is applied to the span element using CSS3 box-shadow while the circles are made by styling the pseudo-elements of the span which are absolutely positioned and have several box shadows for the outer and inner (inset) shadows.

The Final step is to position all the elements properly (I have hardcoded everything with px, maybe there are better ways) and adding some animation sugar with CSS3 transition.

That's all! Here are few more CSS cloud experiments: